我正在通过博览会运行本机应用程序。 react-native-image-picker发生了同样的事情。
我尝试使用react-native link react-native-image-picker
和react-native link react-native-image-crop-picker
。它没有用,所以我尝试取消链接,然后再次链接,但是仍然没有用。我尝试了各种方法,例如还尝试了不同版本的react-native和react-native-image-picker,以及react-native-image-crop-picker。
链接到npm库:-
图像选择器-> https://www.npmjs.com/package/react-native-image-crop-picker/v/0.4.2
image-crop-picker-> https://github.com/react-native-community/react-native-image-picker
react-native-image-picker的代码:-
import ImagePicker from 'react-native-image-picker';
// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
title: 'Select Avatar',
customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
/**
* The first arg is the options object for customization (it can also be null or omitted for default options),
* The second arg is the callback which sends object: response (more info in the API Reference)
*/
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) {
console.log('User tapped custom button: ', response.customButton);
} else {
const source = { uri: response.uri };
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: source,
});
}
});
react-native-image-crop-picker的代码:-
import React from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Modal,
TouchableHighlight,
Alert,
TextInput,
Picker,
Button,
} from 'react-native';
import Textarea from 'react-native-textarea';
import { Card } from 'react-native-shadow-cards';
import ImagePicker from 'react-native-image-crop-picker';
export default class CreateProject extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
handleChoosePhoto = async (imageOpt) => {
if (imageOpt === 'gallery') {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
} else if (imageOpt === 'camera') {
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
}).then(image => {
console.log(image);
});
} else {
Alert.alert('Failure! Can\'t do this operation right now.');
}
}
render() {
return (
// Code for the View here
);
}
}
错误代码:-
[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]
* app/components/CreateProject.js:29:24 in _callee$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:216:8 in async
* app/components/CreateProject.js:27:24 in _callee
* app/components/CreateProject.js:70:87 in onPress
- node_modules/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android.js:213:45 in touchableHandlePress
* [native code]:null in touchableHandlePress
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:878:34 in _performSideEffectsForTransition
* [native code]:null in _performSideEffectsForTransition
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:777:44 in _receiveSignal
* [native code]:null in _receiveSignal
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:488:24 in touchableHandleResponderRelease
* [native code]:null in touchableHandleResponderRelease
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:93:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:318:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:342:30 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:715:42 in executeDispatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:737:20 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:894:29 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:874:16 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1050:21 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1072:19 in runExtractedEventsInBatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2708:6 in <unknown>
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18527:14 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2611:31 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2706:17 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2782:28 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
答案 0 :(得分:0)
问题是您使用过博览会。而且expo不支持任何外部库的链接。因此,如果要使用这些特定的库,则必须从expo弹出,以完全不响应本机。您可以查看如何弹出文档,medium link
否则,您可以使用博览会图像选择器expo-image picker并尝试使用它。
希望有帮助。毫无疑问。