react-native-image-picker环境配置及使用

我就是我 2022-03-15 01:44 552阅读 0赞

*  安装插件。

npm install react-native-image-picker@latest --save

*  link

react-native link react-native-image-picker

*  android环境配置

在Android Studio打开对应项目，进行如下操作

1.添加权限  
在/android/app/src/main/AndroidManifest.xml文件中添加

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

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

2.link成功检查一下下面文件  
android/settings.gradle文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

include ':react-native-image-picker'
    project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

android/app/build.gradle文件的dependencies中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

implementation project(':react-native-image-picker')

/android/app/src/main/java/com/newredsj/MainApplication.java文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

import com.imagepicker.ImagePickerPackage;   //导包
    new ImagePickerPackage()  //getPackages方法中

配置完成

*  ios环境配置

在Xcode打开对应项目，进行如下操作

1.在info.plist中按照下图进行配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]

NSPhotoLibraryUsageDescription

NSCameraUsageDescription

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5][]

如果link失败则需要进行如下操作

*  最后实现代码及图片

App.js

import React, { Component } from 'react';
    import { View, Text, TouchableHighlight, Image } from 'react-native';
    import ImagePicker from 'react-native-image-picker';
    import Tab2Style from './Tab2Style'
    const photoOptions = {
      title: '请选择',
      quality: 0.8,
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '选择相册',
      allowsEditing: true,
      noData: false,
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };
    class ImagePickerView extends Component {
      constructor(props) {
        super(props);
        this.state = {
          avatarSource: null
        };
        this.choosePicker = this.choosePicker.bind(this)
      }
      choosePicker(){
        ImagePicker.showImagePicker(photoOptions, (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
            });
          }
        });
      }
      render() {
        return (
          <View style={Tab2Style.imgbox}>
            <TouchableHighlight style={Tab2Style.button} onPress={this.choosePicker}>
              <Text>相机 & 相册</Text>
            </TouchableHighlight>
            <Image source={this.state.avatarSource} style={Tab2Style.imageStyle}></Image>
          </View>
        )
      }
    }
    class Tabnavigation2 extends Component {
      static navigationOptions = {
        headerTitle: "发现"
      };
      render() {
        return (
          <View style={Tab2Style.container}>
            <Text>Tabnavigation2</Text>
            <ImagePickerView />
          </View>
        );
      }
    }
    export default Tabnavigation2

Tab2Style.js

import React from 'react';
    import {
        StyleSheet
    } from 'react-native';
    
    export default StyleSheet.create(
        {
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor:'#fff'
            },
            imgbox: {
                flex: 1,
                marginTop: 20,
                alignItems: 'center'
            },
            button: {
                marginTop: 20,
                backgroundColor: '#808080',
                height: 35,
                width: 140,
                borderRadius: 5,
                justifyContent: 'center',
                alignItems: 'center'
            },
            imageStyle: {
                height: 180,
                width: 250,
                marginTop: 30,
                alignSelf: 'center'
            }
        }
    );

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220315/a026db920fd34c138cd0c4b71cf84365.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220315/68e2aa34775e47509b503384b0c75a91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220315/ecf9f5e7d72f4925b24f1b5f1d1dd7d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: /images/20220315/bacd3fce346846d28ecc35c10ede3032.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: /images/20220315/802ed82562ad49468ce2a93ce185aa98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5]: /images/20220315/7c11a2667dfa4693ad0ce440b4a6ab66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190228150839465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7]: /images/20220315/81db37bbd6664556abac6bf04cfc9b31.png