无法在iOS本机上使用ImagePicker

时间:2018-12-03 22:54:59

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

在本机反应中使用ImagePicker时遇到问题。 我已经使用命令 with open('tweets.txt', 'r', encoding='utf-8') as file: text = file.readline() 安装了模块。

并使用 npm install react-native-image-picker 链接模块。并为Android和iOS配置。 对于iOS,将以下权限添加到 react-native link 文件:

Info.plist

对于android,向 <key>NSPhotoLibraryUsageDescription</key> <string>$(PRODUCT_NAME) would like access to your photo gallery</string> <key>NSCameraUsageDescription</key> <string>$(PRODUCT_NAME) would like to use your camera</string> <key>NSPhotoLibraryAddUsageDescription</key> 添加以下权限:

AndroidManifest.xml

我的代码如下:

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

然后使用 const options = { title: 'Select Picture...', storageOptions: { skipBackup: true, path: 'images', }, }; 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 { console.log(response.uri); } }); react-native run-android

运行项目

在android上可以,但是在iOS上出现错误。

以下是我得到的错误:

screenshot for iOS

以下是我的 react-native run-ios 文件:

package.json

这是我的App.js文件:

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-gesture-handler": "^1.0.10",
    "react-native-image-picker": "^0.27.1",
    "react-native-indicators": "^0.13.0",
    "react-native-maps": "^0.22.1",
    "react-native-maps-directions": "^1.6.0",
    "react-native-modal": "^7.0.1",
    "react-navigation": "^3.0.4"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

请分享您的答案谁知道可以解决此错误。谢谢。

1 个答案:

答案 0 :(得分:0)

您可以使用launchImageLibrary函数

示例:

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default class ImageSelect extends React.Component {
    state = {
        photo: null,
    };

    handleChoosePhoto = () => {
        const options = {
            noData: true,
        };
        ImagePicker.launchImageLibrary(options, response => {
            if (response.uri) {
                this.setState({ photo: response });
            }
        });
    };



    render() {
        const { photo } = this.state;
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                {photo && (
                    <Image
                        source={{ uri: photo.uri }}
                        style={{ width: 100, height: 100 }}
                    />
                )}
                <Button title="Choose Photo" onPress={this.handleChoosePhoto} />
            </View>
        );
    }
}
`