react-native 手机拍照权限

第一步 :

在 android/app/src/main/AndroidManifest.xml 添加

然后运行项目在手机应用权限哪里查看 这是添加前的 这是添加后的

第二步调用 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,
}

});

原文链接:segmentfault.com

上一篇:你可能还不知道却很常用的console方法
下一篇:bunyan-gelf

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    9 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    10 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    4 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    3 个月前
  • 面试中React与Vue的比对

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,JS运行效率高,要减少DOM操作 使用:snabbdom的使用 ...

    2 年前

官方社区

扫码加入 JavaScript 社区