[英]using react-native-camera with react-native-navigation
I just started react-native and I made a multi screen android application (by using react-native-navigation
. My screens are functions as shown in examples of screen navigation but now I want to use the camera in the 2nd screen.我刚刚启动 react-native 并制作了一个多屏幕 android 应用程序(通过使用
react-native-navigation
。我的屏幕是屏幕导航示例中所示的功能,但现在我想在第二个屏幕中使用相机。
An idea of how my code looks:关于我的代码外观的想法:
import React, {Component} from 'react';
import { Platform, StyleSheet, Text, View, ScrollView, TextInput, Button, Image } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { RNCamera, FaceDetector } from 'react-native-camera';
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Screen1"
component={Screen1}
/>
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
);
}
function Screen1({navigation}) {
return (
<View style={styles.container}>
<Button
title="Go to screen 2"
onPress={() => navigation.navigate('Screen2', {mode: 'dev'})} // passing parameters: mode
/>
</View>
);
}
function Screen2({navigation}) {
return (
<View>
<RNCamera
ref={ref => {
this.camera = ref
}}
style={styles.scanner}
/>
</View>
);
}
I get the error: TypeError: undefined is not an object (evaluating '_this.camera=_ref3')
in screen2.我收到错误:
TypeError: undefined is not an object (evaluating '_this.camera=_ref3')
in screen2。
Though this error does not come when I define the App as one class and put the camera on the first screen (and not be able to navigate because react-native-navigation
uses functions for screens).虽然当我将应用程序定义为 class 并将相机放在第一个屏幕上时不会出现此错误(并且无法导航,因为
react-native-navigation
使用屏幕功能)。
Apologies if I sound naive I'm new to react.抱歉,如果我听起来很天真,我是新手。
I haven't used these packages, but it looks like an issue with your ref
and use of this
.我没有使用这些包,但它看起来像你的
ref
和使用this
的问题。 I normally use class components for anything that needs a ref, so you could try writing Screen2 like this:我通常将 class 组件用于任何需要 ref 的组件,因此您可以尝试像这样编写 Screen2:
class Screen2 extends Component {
camera;
render() {
return (
<View>
<RNCamera ref={ref => (this.camera = ref)} style={styles.scanner} />
</View>
);
}
}
Basically when Screen2
mounts you instantiate the component with an empty member called camera
.基本上,当
Screen2
挂载时,您使用一个名为camera
的空成员来实例化组件。 As soon as the camera component renders it'll assign a reference to itself to Screen2
's camera
member.一旦相机组件呈现,它将对自己的引用分配给
Screen2
的camera
成员。 And then that ref will let you manipulate your camera component directly (using this.camera
).然后该 ref 将让您直接操作您的相机组件(使用
this.camera
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.