React Native - 使用图片选择器react-native-image-picker拍照、选照片

我们程序中需要提供用户上传照片的功能。照片可以从设备相册中选择，也可以使用摄像头直接拍摄。这个功能使用 react-native-image-picker 库就可以很方便的实现。
1，react-native-image-picker介绍
react-native-image-picker 是一个第三方的开源库，它提供了原生的 UI 界面供用户选择图片或视频。图片或视频的来源可以是系统相簿，也可以是相机直接拍摄。
使用 react-native-image-picker 我们不必关心如何与设备相册、摄像头如何交互，用户操作完毕后我们就可以直接得到资源的 URI 地址、或者 base64 字符串（限图片）。
GitHub 主页地址：https://github.com/marcshilling/react-native-image-picker

2，安装配置
（1）首先在“终端”中进入项目目录，然后执行如下命令安装最新版本的 react-native-image-picker
1

npm install react-native-image-picker@latest --save

（2）接着运行如下命令链接相关的依赖库：

react-native link

（3）由于我们需要调用摄像头拍照、录像，同时拍完还要保存到相册中。因此需要在 Info.plist 里配置请求摄像头、麦克风、及照片的相关描述字段：

Privacy - Camera Usage Description
Privacy - Photo Library Usage Description
Privacy - Microphone Usage Description

使用

var ImagePicker = require('react-native-image-picker');
//图片选择器参数设置
var options = {
  title: '请选择图片来源',
  cancelButtonTitle:'取消',
  takePhotoButtonTitle:'拍照',
  chooseFromLibraryButtonTitle:'相册图片',
  customButtons: [
    {name: 'hangge', title: 'hangge.com图片'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};
export default class App extends Component<Props> {
//构造器
constructor(props) {
  super(props);
  this.state = {
   avatarSource:require('/Users/ljl/RNTwoApp/22.jpg')

  };

 this.onPressPicker = this.onPressPicker.bind(this);
// this.NetINfo = this.NetINfo.bind(this);
}

render() {
    return (
      <View style={styles.container}>
       <Button onPress={this.onPressCamera}
      title="相机拍照摄像"/> 
       <Button onPress={this.onPressPhoto}
      title="相册图片"/> 
       <Button onPress={this.onPressPicker}
      title="拍照选照片"/> 
      <Button onPress={this.onPressLocition.bind(this)}
      title="定位"/> 
       <Button onPress={this.Vibration}
      title="实现震动"/> 
      <Button onPress={this.NetINfo}
      title="获取网络信息"/> 
    <Image source={this.state.avatarSource} style={styles.image}/>

      </View>
    );
  }

//拍照取照片
  onPressPicker(){
    ImagePicker.showImagePicker(options,(response) =>{
      console.log('response'+response);
      if (response.didCancel){
        console.log('用户取消了选择');
      }else if (response.error){
        alert("ImagePicker发生错误：" + response.error);

          }else if (response.customButton) {
                  alert("自定义按钮点击：" + response.customButton);
                }else {

                                        let source = {uri: response.uri.replace('file://', '')};

                                        // You can also display the image using data:
                                        // let source = { uri: 'data:image/jpeg;base64,' + response.data };

                                          this.setState({
                                           avatarSource: source
                                          })

                      }
     })      
  }
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  image:{
    height:198,
    width:300,
    color: 'red',
    //alignSelf:'center',
  }
});