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 }) }); }
好了,可以使用!!!!!