在React Native中打开Image Picker时,应用程序停止工作

时间:2019-06-14 15:58:12

标签: react-native react-native-image-picker

我正在使用React Native开发一个React Native应用程序。我正在使用react native图像选择器库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;

我的代码有什么问题?另外,如下面所附的屏幕截图所示,我在控制台中没有得到任何错误信息。

enter image description here

我尝试过,也以这种方式打开

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

它刚刚停止工作。

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

enter image description here

我也尝试过

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

    });

1 个答案:

答案 0 :(得分:2)

感谢您的帮助。我发现了问题。问题出在plist上。添加权限时,我只是从帖子中复制粘贴。可能东西有问题。当我在XCode中键入权限时,我看到了建议框,因此我只单击了建议框,并为每个权限添加了说明,如下所示。

enter image description here

如上图所示,“类型”列中的“字符串”值显示为灰色,无法更改。在问题所附的屏幕截图中,可以更改这些值。就是这样。