在 React Native 中打开 Image Picker 时应用停止工作答案

【问题标题】：App stop working when Image Picker is opened in React Native在 React Native 中打开 Image Picker 时应用停止工作
【发布时间】：2019-06-14 15:58:12
【问题描述】：

我正在使用 React Native 开发一个 React Native 应用程序。我正在使用 react 本机图像选择器库 https://www.npmjs.com/package/react-native-imagepicker 从图库中选择图像。但是当我打开图像选择器时，我的应用程序停止工作并退出。

这是我的代码

import React from "react";
import { CameraRoll, View, Text, Button, Alert, Image } from "react-native";
import ImagePicker from "react-native-image-picker";

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

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url:"https://www.designevo.com/res/templates/thumb_small/terrible-black-bat-icon.png",
      avatarSource: null
    };
  }

  saveToCameraRoll = () => {
    let { url } = this.state;
  };

  _handlePickImageButton = () => {
    ImagePicker.showImagePicker(options, response => {
      console.log("Response = ", response);

      if (response.didCancel) {
        Alert.alert("User cancelled image picker")
      } else if (response.error) {
        //console.log("ImagePicker Error: ", response.error);
        Alert.alert("ImagePicker Error:");
      } else if (response.customButton) {
        //console.log("User tapped custom button: ", response.customButton);
        Alert.alert("Custom button");
      } else {
        const source = { uri: response.uri };
        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };

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

  render() {
    return (
      <View>
        <Button
          onPress={() => {
            this._handlePickImageButton();
          }}
          title="Pick a image"
        >
          Pick image
        </Button>
        <Image source={this.state.avatarSource} />
      </View>
    );
  }
}

export default Gallery;

我的代码有什么问题？此外，我没有在控制台中收到任何错误信息，如下面的屏幕截图所示。

我试过了，也是这样打开的

ImagePicker.launchImageLibrary(options, (response) => {
      //nothing implemented yet
    });

它刚刚停止工作。

我也在 plist 中添加了以下权限：

我也试过了

const options = {
      noData: true
    };
    ImagePicker.launchImageLibrary(options, (response) => {

    });

【问题讨论】：

你确定你使用得当吗？从文档中，我看到只有我可以从 ImagePicker 调用的 API 方法 - 它是 open
嗨，自定义按钮功能正在工作

标签： react-native react-native-image-picker

【解决方案1】：

我发现了问题。问题出在 plist 中。当我添加权限时，我只是从帖子中复制粘贴。可能是它出了什么问题。当我在 XCode 中输入权限时，我看到了建议框，所以我只需单击建议框并添加每个权限的说明，如下所示。

如上图所示，Type 列中的 String 值显示为灰色，无法更改。在问题附带的屏幕截图中，可以更改这些值。这就是区别。

【讨论】：