使用带react-native导航的react-native-camera

Question

我刚刚开始使用原生的react，我做了一个多屏幕的安卓应用程序(通过使用react-native-navigation。我的屏幕是屏幕导航示例中所示的功能，但现在我想使用第二个屏幕中的摄像头。

了解一下我的代码是什么样子的：

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>
  );
}

我得到的错误是: screen2中的TypeError: undefined is not an object (evaluating '_this.camera=_ref3')。

尽管当我将应用程序定义为一个类并将摄像头放在第一个屏幕上(并且不能导航，因为react-native-navigation使用屏幕函数)时，这个错误不会出现。

抱歉，如果我听起来很天真，我是个新手。

Answer 1

我还没有用过这些包，但是看起来你的ref和this的使用有问题。我通常使用类组件来处理任何需要引用的内容，所以您可以尝试像这样编写Screen2：

class Screen2 extends Component {
  camera;

  render() {
    return (
      <View>
        <RNCamera ref={ref => (this.camera = ref)} style={styles.scanner} />
      </View>
    );
  }
}

基本上，在挂载Screen2时，您使用一个名为camera的空成员来实例化组件。一旦相机组件呈现出来，它就会给Screen2的camera成员分配一个对它自身的引用，然后这个引用会让你直接操作相机组件(使用this.camera)。