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 】添加相應的配置信息