反应本机元素头像

Question

我想通过点击头像组件上传图片，然后从设备中选择一张照片。有人知道是否可以使用 react-native-elements 中的头像组件吗？

我已经添加了以下权限：

 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

你认为我还必须安装 react-native-image-picker 库吗？

提前致谢，

Answer 1

您正在使用的库他们没有维护。使用 react-native-crop-picker

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

    <Avatar
      source={this.state.image}
      onPress={() => this.openPicker()}
    />

      openPicker() {
        ImagePicker.openPicker({
          width: 200,
          height: 200,
          cropping: true,
          includeBase64: true,
          includeExif: true,
        }).then(image => {
          this.setState({
            image: { uri: `data:${image.mime};base64,${image.data}`,
              width: image.width,
              height: image.height },
          });
        }).catch(e => console.log(e));
      }

Answer 2

  constructor(props: Object) {
    super(props);
    this.state = {
      image_uri: '' //initially set the state of image with default image
    };
  }

**your avatar component** 

  <Avatar
    small
    rounded
    source = {{uri: this.state.image_uri}}
    onPress={() => this.openImagePicker()}
    activeOpacity={0.7}
  />

 **import { showImagePicker } from 'react-native-image-picker';**

  captureMediaOrGetFromDeviceLibrary(options: Object = OPTIONS) {
      var promise = new Promise(function(fulfill, reject) {
      showImagePicker(options, (response) => {
      if (response.didCancel) {
        fulfill ({success: false})
      } else if (response.error) {
        fulfill ({success: false})
      } else {
        fulfill ({
         success: true,
         media_data: response
        })
      }
    })
  })
  return promise.then((response)=>{
    return response
  })
 }


 openImagePicker() {
   const options = {
    quality: 1.0,
    maxWidth: 500,
    maxHeight: 500
   };
   return captureMediaOrGetFromDeviceLibrary(options).then((response)=> {
     if(response.success){
       this.setState({image_uri:response.media_data.uri})
     }
   }) 
  }
}

反应本机元素头像

react-native-elementes Avatar

element

avatar

react-native

react-native-image-picker