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

  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头像

1 个答案: