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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

  • 安装插件。

npm install [email protected] --save

  • link

react-native link react-native-image-picker

  • android环境配置

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

1.添加权限

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

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

2.link成功检查一下下面文件

android/settings.gradle文件中

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中

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

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

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

配置完成

  • ios环境配置

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

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

NSPhotoLibraryUsageDescription

NSCameraUsageDescription

如果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'
        }
    }
);

以上是 react-native-image-picker环境配置及使用 的全部内容， 来源链接： utcz.com/z/383149.html

回到顶部