无法在 iOS 上使用 ImagePicker 进行本机反应答案

【问题标题】：Can not use ImagePicker on iOS in react native无法在 iOS 上使用 ImagePicker 进行本机反应
【发布时间】：2018-12-03 22:54:59
【问题描述】：

我在 react native 中使用 ImagePicker 时遇到问题。我已经使用命令 npm install react-native-image-picker 安装了模块。

并使用 react-native link 链接模块。并且还针对 Android 和 iOS 进行配置。对于 iOS，将以下权限添加到 Info.plist 文件：

<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>

对于 android，将以下权限添加到 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、react-native run-ios

运行项目

在安卓上没问题，但我在 iOS 上出现错误。

以下是我得到的错误：

以下是我的 package.json 文件：

{
  "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"
  }
}

这是我的 App.js 文件：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, ScrollView} from 'react-native';


import { createStackNavigator, createAppContainer} from 'react-navigation';

import SignIn from './src/pages/SignIn';
import SignUp from './src/pages/SignUp';
import Home from './src/pages/Home';
import Setting from './src/pages/Setting';
import ForgetPassword from './src/pages/ForgetPassword';
import Verification from './src/pages/Verification';

const AppStackNavigation = createStackNavigator(
    {
        SignIn: {screen: SignIn},
        SignUp: {screen: SignUp},
        Home: {screen: Home},
        Setting: {screen: Setting},
        ForgetPassword: {screen: ForgetPassword},
        Verification: {screen: Verification},
    }
)

const AppContainer = createAppContainer(AppStackNavigation);

export default AppContainer;

请分享您的答案，知道修复此错误。谢谢。

【问题讨论】：

你在 App.js 中做了什么代码？
嗨，Dhruv。感谢您的回复。我在 App.js 中使用了 CreateStackNavigator。而且没有其他用处。在某个页面中，有一个拍照按钮，在拍照按钮点击事件中调用ImagePicker.showImagePicker函数。
也请分享一些代码 sn-p。追查问题会很有帮助。
导入 { createStackNavigator, createAppContainer} from 'react-navigation'; const AppStackNavigation = createStackNavigator( { SignIn: {screen: SignIn}, SignUp: {screen: SignUp}, Home: {screen: Home}, Setting: {screen: Setting}, ForgetPassword: {screen: ForgetPassword}, 验证: {screen : 验证}, } ) const AppContainer = createAppContainer(AppStackNavigation);导出默认 AppContainer;
嗨。德鲁夫。此代码有助于解决我的问题吗？请分享你的想法。谢谢。

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

【解决方案1】：

你可以使用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>
        );
    }
}
`

【讨论】：