【发布时间】：2020-07-14 22:56:44
【问题描述】：
我正在使用 react-native v0.63 和 Expo SDK 38 进行开发。我的目标是读取 android 或 ios 手机的相机滚动并选择图片，然后将这些图片编入一个数组并显示在手机屏幕上.我通过研究发现 Expo SDK 38 不支持 react-native cameraroll 并且必须使用 expo-media-library 来实现这些功能。作为测试，我从研究中提取了一些代码，该代码要求获得访问相机和相机胶卷的权限。没关系。然后我调用 this.camera.takePictureAsync() 看看我是否可以访问相机拍照。简单的测试。这就是我得到错误的地方：未处理的承诺拒绝：TypeError：未定义不是对象（评估'_this.camera.takePictureAsync'）
这是我的设置： 完整的错误是：
WARNING
18:17
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this.camera.takePictureAsync')]
Stack trace:
node_modules\react-navigation\node_modules\@react-navigation\native\lib\module\createNavigationAwareScrollable.js:105:6 in NavigationAwareScrollable#render
node_modules\regenerator-runtime\runtime.js:45:36 in tryCatch
node_modules\regenerator-runtime\runtime.js:274:29 in invoke
node_modules\regenerator-runtime\runtime.js:45:36 in tryCatch
node_modules\regenerator-runtime\runtime.js:135:27 in invoke
node_modules\regenerator-runtime\runtime.js:170:16 in PromiseImpl$argument_0
node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
node_modules\promise\setimmediate\core.js:200:22 in doResolve
node_modules\promise\setimmediate\core.js:66:11 in Promise
node_modules\regenerator-runtime\runtime.js:169:15 in callInvokeWithMethodAndArg
node_modules\regenerator-runtime\runtime.js:192:38 in enqueue
node_modules\regenerator-runtime\runtime.js:219:8 in exports.async
http://192.168.0.27:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:253923:41 in _callee
http://192.168.0.27:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:254521:108 in onPress
node_modules\react-native\Libraries\Components\Touchable\TouchableNativeFeedback.js:169:10 in Pressability$argument_0.onPress
node_modules\react-native\Libraries\Pressability\Pressability.js:655:17 in _performTransitionSideEffects
node_modules\react-native\Libraries\Pressability\Pressability.js:589:6 in _receiveSignal
node_modules\react-native\Libraries\Pressability\Pressability.js:499:8 in responderEventHandlers.onResponderRelease
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:286:4 in invokeGuardedCallbackImpl
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:497:2 in invokeGuardedCallback
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:521:2 in invokeGuardedCallbackAndCatchFirstError
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:683:41 in executeDispatch
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:707:19 in executeDispatchesInOrder
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:872:28 in executeDispatchesAndRelease
[native code]:null in forEach
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:851:4 in forEachAccumulated
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:897:20 in runEventsInBatch
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:1069:18 in runExtractedPluginEventsInBatch
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2835:35 in batchedUpdates$argument_0
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20569:13 in batchedUpdates$1
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2731:29 in batchedUpdates
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2834:16 in _receiveRootNodeIDEvent
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2911:27 in receiveTouches
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
[native code]:null in callFunctionReturnFlushedQueue
...
我的进口：
import React, { Component } from "react";
import styles from "./styles";
import { Platform, Image, ImageBackground, TextInput, TouchableWithoutFeedback, TouchableOpacity, Dimensions, FlatList, SafeAreaView,TouchableHighlight, View as RNView, Text, Alert } from "react-native";
import {Container, Grid, Col, Row, Header, Content, Item, Input, View, List, ListItem, Textarea, Button, Form, Accordion, Left, Right, Body,Thumbnail, Icon, Title, Spinner, Picker, DatePicker, } from 'native-base';
import { Ionicons } from '@expo/vector-icons';
import { FlatGrid } from 'react-native-super-grid';
import {Image as SVGImage} from "react-native-svg";
import Fire from '../Fire';
import firebase from 'firebase';
import * as ImagePicker from 'expo-image-picker';
// import * as Permissions from 'expo-permissions';
import Expo, { Constants, } from 'expo';
import * as MediaLibrary from 'expo-media-library';
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';
要获得我调用的权限：
async componentDidMount() {
this.getCameraPermissions();
}
async getCameraPermissions() {
console.log('getCameraPermissions: enter function');
const { status } = await Permissions.askAsync(Permissions.CAMERA);
if (status === 'granted') {
console.log("getCameraPermissions: status = "+status);
this.setState({ cameraGranted: true });
} else {
this.setState({ cameraGranted: false });
console.log('Uh oh! The user has not granted us permission.');
}
this.getCameraRollPermissions();
}
async getCameraRollPermissions() {
console.log("getCameraRollPermissions: Enter Function");
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status === 'granted') {
console.log("getCameraRollPermissions: status = "+status);
this.setState({ rollGranted: true });
} else {
console.log('Uh oh! The user has not granted us permission.');
this.setState({ rollGranted: false });
}
}
这是引发错误的函数调用。您可以通过控制台日志看到它进入函数并在 takepictureasync() 上死掉
takePictureAndCreateAlbum = async () => {
console.log('takePictureCreateAlbum: Entering function');
const { uri } = await this.camera.takePictureAsync()
.then(() => {
Alert.alert('takePictureCreateAlbum: taking picture')
})
.catch(error => {
Alert.alert('takePictureCreateAlbum Error!');
});
console.log('takePictureCreateAlbum: uri', uri);
const asset = await MediaLibrary.createAssetAsync(uri);
console.log('asset', asset);
MediaLibrary.createAlbumAsync('Expo', asset)
.then(() => {
Alert.alert('Album created!')
})
.catch(error => {
Alert.alert('An Error Occurred!')
});
};
作为测试，我从这里的按钮调用它：
<Button
style={{flex: 1, justifyContent: "flex-start", backgroundColor: "lightgrey", marginRight: 5}}
onPress={() =>
this.state.rollGranted && this.state.cameraGranted
? this.takePictureAndCreateAlbum()
: Alert.alert('Permissions not granted')
// this.switchToStories();
}
>
我正在模拟的 android 设备和真正的 android 设备 Samsung S7 上进行测试。两者都会产生错误。
我以为我可以捕获错误但失败了。我还尝试从调用中返回所有值，而不仅仅是 uri，它的作用相同。想法？
【问题讨论】：
标签： react-native android-camera expo