react-native-image-picker集成相机和相册

安装和配置部分请参考链接： https://www.cnblogs.com/shaoting/p/6148085.html

 

安装配置完毕开始使用

使用方法：

引入

　　import ImagePicker from 'react-native-image-picker';

定义options：

　　

var photoOptions = {

    title: '选择头像',
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    quality: 0.75,
    allowsEditing: true,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

 

 

render内容：

<TouchableOpacity onPress={this._pickPhoto.bind(this)} style={styles.avatarContainer}>
    <Image style={styles.avatarContainer} source={{uri: user.avatar}}>
         <View style={styles.avatarBox}>
               <Image
                    source={{uri: user.avatar}}
                    style={styles.avatar} />
         </View>
         <Text style={styles.avatarTip}>戳这里换头像</Text>
    </Image>
</TouchableOpacity>

对_pickPhoto()进行编写_pickPhoto() {

_pickPhoto() {        
        let that = this;
        ImagePicker.showImagePicker(photoOptions, (res) => {if (res.didCancel) {
                return
            }

            let avatarData = 'data:image/jpeg;base64,' + res.data;//需要添加逗号

            let user = this.state.user;
            user.avatar = avatarData;

            that.setState({
                user: user
            })
        });
    }

 

 

好了，可以使用！！！！！

 

 

 

 

转载于:https://www.cnblogs.com/krystalcl/p/8489330.html