ReactNative-拍照、相册选择【react-native-image-picker 2.x版本和3.x版本（最新版本）】的使用详解

 

react-native-image-picker 2.x版本和3.x版本（最新版本）的使用详解

 

一、react-native-image-picker 2.x版本的应用GitHub参考文档

　　1. 安装依赖（cmd进入项目根目录执行命令）

yarn add react-native-image-picker

 #RN >= 0.60（如果你的react-native版本 > = 0.60执行以下命令）
 npx pod-install

 #RN < 0.60（如果你的react-native版本< 0.60执行以下命令）
 react-native link react-native-image-picker

　　2. Android配置（如需设置IOS自行查看GitHub文档）

• 打开项目根目录，然后进入该路径android\app\src\main找到AndroidManifest.xml，添加以下两行代码：

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

以上设置好后，可以测试是否可以使用，若不行接着做以下设置......

• 进入项目根目录，打开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\你的项目名称1\MainApplication.java文件，添加以下代码：

import com.imagepicker.ImagePickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage(), // <-- add this line
            // OR if you want to customize dialog style
            new ImagePickerPackage(R.style.my_dialog_style)
        );
    }
}

• 进入项目根目录，打开android\app\src\main\java\com\你的项目名称1\MainActivity.java文件，添加以下代码：

// 1. 添加以下两行：
    import com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import
    import com.facebook.react.modules.core.PermissionListener; // <- add this import

    public class MainActivity extends ReactActivity {
        // 2. 添加如下一行：
        private PermissionListener listener; // <- add this attribute

        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "native_camera";
        }
    }

老铁以上设置好后即可正常使用 哦yes!!!

　　1.3.使用

import ImagePicker from 'react-native-image-picker';

const options = {
    title: '请选择',
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'从相册选择',
    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) {
        Alert.alert('自定义按钮:' + response.customButton)
      } else {
        const source = { uri: response.uri };
        Alert.alert(JSON.stringify(source))
        console.log("source:" + JSON.stringify(source))
      }
    });

以上代码是包含相机以及相册（ui+功能），如果你想要直接触发某项功能，可以调用以下方法：

function openCamera(){
    ImagePicker.launchCamera(options , (response) =>{
      console.log("response:" + response.path)
    })
  }

  function openImageLibrary(){
    ImagePicker.launchImageLibrary(options , (response) =>{
      console.log("response:" + response.path)
    })
  }

二、react-native-image-picker 3.x版本的应用GitHub参考文档

【注意：3.x版本不需要设置权限】

　　1.安装依赖

//@latest选择最新版本
yarn add react-native-image-picker@latest

# RN >= 0.60
cd ios && pod install

# RN < 0.60
react-native link react-native-image-picker

　　2.使用

import * as ImagePicker from 'react-native-image-picker';//--------> 切记注意导包格式
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  Platform,
  SafeAreaView,
  Button,
} from 'react-native';
class App extends React.Component {
  const [response, setResponse] = React.useState(null);

  return (
    <SafeAreaView>
      <ScrollView>
        <Button
          title="Take image"
          onPress={() =>
            ImagePicker.launchCamera(
              {
                mediaType: 'photo',
                includeBase64: false,
                maxHeight: 200,
                maxWidth: 200,
              },
              (response) => {
                setResponse(response);
              },
            )
          }
        />

        <Button
          title="Select image"
          onPress={() =>
            ImagePicker.launchImageLibrary(
              {
                mediaType: 'photo',
                includeBase64: false,
                maxHeight: 200,
                maxWidth: 200,
              },
              (response) => {
                setResponse(response);
              },
            )
          }
        />

        <Button
          title="Take video"
          onPress={() =>
            ImagePicker.launchCamera({mediaType: 'video'}, (response) => {
              setResponse(response);
            })
          }
        />

        <Button
          title="Select video"
          onPress={() =>
            ImagePicker.launchImageLibrary({mediaType: 'video'}, (response) => {
              setResponse(response);
            })
          }
        />

        <View style={styles.response}>
          <Text>Res: {JSON.stringify(response)}</Text>
        </View>

        {response && (
          <View style={styles.image}>
            <Image
              style={{width: 200, height: 200}}
              source={{uri: response.uri}}
            />
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    marginVertical: 24,
    marginHorizontal: 24,
  },
  image: {
    marginVertical: 24,
    alignItems: 'center',
  },
  response: {
    marginVertical: 16,
    marginHorizontal: 8,
  },
});

 

三、使用过程中可能会遇到的问题

1、报错 提示 image-picker 和 sdk 版本问题 ，可以打开你项目下android/app/src/main/AndroidManifest.xml文件添加以下两行代码：

 

 

xmlns:tools="http://schemas.android.com/tools"

1 <uses-sdk tools:overrideLibrary="com.imagepicker"/>

如果出现bug 建议重新初始项目来测试。。。。。

2、关于response的返回值在github的api里也有详细说明。

好了，介绍结束，其实还有个更高star的库react-native-camera，而且是有人脸识别功能的，但我觉得普通项目用本文这个已经够用了。

ps:如果跑项目报了一些莫名其妙的错误，可以试着删除node_modules，然后在项目命令行里执行

yarn install

//或者输入

npm instal

 

四、android 10.0 注意参考该博文【链接：https://www.cnblogs.com/freecolor/p/14006263.html 】添加相应的配置信息