“从图库或相机中选择图像”选项

时间:2017-11-01 05:46:13

标签: reactjs react-native expo

我想选择"从图库或相机选择图像"。我尝试了很多模块,但他们只是直接提供对图库的访问。我正在使用expo工具来创建反应本机应用程序。首先,我想要打开一个弹出窗口,然后用户必须选择一个选项,然后根据该选项重定向用户。如果您有任何建议,请帮助我。

1 个答案:

答案 0 :(得分:0)

我已经看到它是使用React Native Image Picker完成的,请在github中查找它:

https://github.com/react-community/react-native-image-picker

添加依赖项:

dependencies {
    compile project(':react-native-image-picker')
}

添加权限:

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

用法

var ImagePicker = require('react-native-image-picker');

// More info on all the options is below in the README...just some common use cases shown here
var options = {
  title: 'Select Avatar',
  customButtons: [
    {name: 'fb', title: 'Choose Photo from Facebook'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info below in README)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    let source = { uri: response.uri };

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

    this.setState({
      avatarSource: source
    });
  }
});

如果您只想直接启动相机或图库,请像这样使用它:

// Launch Camera:
ImagePicker.launchCamera(options, (response)  => {
  // Same code as in above section!
});

// Open Image Library:
ImagePicker.launchImageLibrary(options, (response)  => {
  // Same code as in above section!
});

希望有帮助。