react-native 手机拍照权限

2019-10-16 admin

第一步 :

image.png 在 android/app/src/main/AndroidManifest.xml 添加<uses-permission android:name=“android.permission.CAMERA”/>

然后运行项目在手机应用权限哪里查看 这是添加前的 Screenshot_2019-10-16-14-03-37-208_com.miui.secur.png 这是添加后的 Screenshot_2019-10-16-14-22-40-526_com.miui.secur.png

第二步调用 import React, {Component} from ‘react’; import {

View,
Text,
Image,
StyleSheet,
Button,
Modal,
TouchableHighlight,
TouchableOpacity,
Dimensions

} from ‘react-native’; import ImagePicker from ‘react-native-image-picker’;

// const Dimensions = require (‘Dimensions’) ; export default class Jidan extends Component {


state={
    avatarSource: {},
}
// 选择图片或相册
onClickChoosePicture = () => {
    const options = {
        title: '',
        cancelButtonTitle: '取消',
        takePhotoButtonTitle: '拍照',
        chooseFromLibraryButtonTitle: '选择照片',
        storageOptions: {
            skipBackup: true,
            path: 'images',
        }
    };

    ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled image picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
        } else {
            const source = {uri: response.uri};
            this.setState({
                avatarSource: source,
            });
            console.warn(this.state.avatarSource.uri);
        }
    });
}

async requestCarmeraPermission() {
    try {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
            {
                  'title': 'Camera Permission',
                'message': 'the project needs access to your camera ' +
               'so you can take awesome pictures.'
            }
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            this.show("你已获取了相机权限")
        } else {
            this.show("获取相机失败")
        }
    } catch (err) {
        this.show(err.toString())
    }
}

render() {

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.button_view}
                onPress={this.requestCarmeraPermission.bind(this)}>
                <Text style={styles.button_text}>申请相机权限</Text>
            </TouchableOpacity>
            <Text style={styles.textStyle}  onPress={() => this.onClickChoosePicture()}>选择图片</Text>
            <Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
        </View>
    );
}

} const styles = StyleSheet.create({

button_view: {
    margin:4,
    borderRadius: 4,
    backgroundColor: '#8d4dfc',
    alignItems: 'center',
},
button_text: {
    padding: 6,
    fontSize: 16,
    fontWeight: '600'
},
container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:60,
},
textStyle:{
    backgroundColor:'#66CCFF',
    paddingHorizontal:50,
    paddingVertical:10,
},
uploadAvatar:{
    width: 150,
    height: 150,
}

});

[转载]原文链接:https://segmentfault.com/a/1190000020706063

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77531.html

文章标题:react-native 手机拍照权限

相关文章
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
js结合正则实现国内手机号段校验
附加一个utils对象,内含一个校验手机号函数,一个格式化返回数据函数 var isChinaMobile = &#x2F;^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\...
2017-03-25
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下: 手机版的拼图。pc上用Chrome 或者 Firefox var R=(function(){ &#x2F;*右边菜单*&#x2F; functi...
2017-03-27
js判断手机端(Android手机还是iPhone手机)
网上常用的代码 &#x2F;** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android *&#x2F; function ismobile(test){ var u = naviga...
2017-03-27
Html5塑手机浏览器:腾讯X5谋生态链
最近,手机浏览器一系列大事件引人瞩目。 先是搜狐创始人、CEO张朝阳通过微博推荐手机QQ浏览器,而不是自家的搜狗手机浏览器,引起坊间热议。一个以X5为核心的生态圈正在悄然成型。 然后UC浏览器发出微博:“约吗?”,公开挑战其他手机浏览器。当...
2015-11-12
JS制作手机端自适应缩放显示
JS制作手机端自适应缩放显示 示例一: &lt;script&gt; var _width = parseInt(window.screen.width); var scale = _width&#x2F;640; var ua = nav...
2017-03-24
#react-native# Error: Command failed: gradlew.bat installDebug
这篇文章主要解决react-native中遇到的bug。 编译并运行 React Native 应用之前我们可以使用下面的方法清理gradlew 和之前的构建文件。 Error: Command failed: gradlew.bat in...
2019-02-28
简化版手机端照片预览组件
可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://gith...
2017-03-22
vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开p...
2018-06-06
回到顶部