【发布时间】：2020-03-02 03:54:00
【问题描述】：
我已经尝试了很多尝试来获取 react-native-image-picker 并使用我的 RN 应用程序。我正在使用 Expo 和 VS Code，并且没有使用 Xcode 或 Android Studio 运行该应用程序。在应用程序中获取相机胶卷似乎有很多选择，我不确定哪条是最佳途径。似乎没有一个对我有用，所以我想选择最好的路径并专注于使那条路径有效。
我正在关注文档：https://github.com/react-native-community/react-native-image-picker
我尝试过的事情：
- React 原生相机胶卷
- Expo ImagePicker
- expo-image-picker
- react-native-image-picker
- 反应图像上传
- react-native-photo-upload
我的代码：
import React, {useState, useEffect} from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, CameraRoll } from 'react-native'
import ImagePicker from 'react-native-image-picker';
// import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
const PicturesScreen = ({navigation}) => {
const [pictures, setPictures] = useState([]);
getPermissionAsync = async () => {
if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
};
useEffect(() => {
getPermissionAsync();
}, []);
selectPhotoTapped = () => {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
},
};
ImagePicker.showImagePicker(options, response => {
if (response.didCancel) {
console.log('User cancelled photo 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};
console.log('source: ' + source);
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
setPictures({
picture: source
});
}
});
};
return (
<View style = {styles.container}>
<TouchableOpacity style = {styles.buttonContainerPhoto} onPress={()=> selectPhotoTapped()}>
<Text style={styles.buttonText} >
Upload Photos
</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonContainer} onPress={()=> navigation.navigate('NextScreen')}>
<Text style={styles.buttonText} >
Next
</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
...
}
});
export default PicturesScreen;
我已确保链接软件包，我也卸载并重新安装并从头开始几次。我已降级版本以使其正常工作，但我仍然继续收到以下错误消息之一：
react-native-image-picker: NativeModule.ImagePickerManager 为空
或
无法读取未定义的属性“showImagePicker”。
或
undefined 不是对象（正在评估 'imagepickerManager.showimagepicker'）
是否因为我使用 Expo 而导致问题？我应该只使用带有 react-native 的 CameraRoll 吗？
【问题讨论】：
-
我正在使用 RN v0.60.4 和 react-native-image-picker v1.0.1。在 android 模拟器和 ios 模拟器上运行良好。正如您所逃避的那样，这很可能是世博会的问题。另见stackoverflow.com/questions/54352838/…
-
哼。是的，我使用的是 react-native: 0.59.8 并尝试在 v0.26.0 和 0.28.0 上运行它。我想知道在 RN 上运行它是否也可能是一个问题
-
如果您使用 Expo，则必须使用 expo-image-picker：docs.expo.io/versions/v35.0.0/sdk/imagepicker 任何需要使用
react-native link的东西都不适用于 Expo，除非声明它已经与 Expo 捆绑世博会 -
谢谢，如果您想将此作为答案发布，我可以将其标记为正确@zaytrix
标签： react-native expo react-native-camera react-native-image-picker