使用帶有 react-native-navigation 的 react-native-camera

Question

我剛剛啟動 react-native 並制作了一個多屏幕 android 應用程序（通過使用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>
  );
}

我收到錯誤： TypeError: undefined is not an object (evaluating '_this.camera=_ref3') in screen2。

雖然當我將應用程序定義為 class 並將相機放在第一個屏幕上時不會出現此錯誤（並且無法導航，因為react-native-navigation使用屏幕功能）。

抱歉，如果我聽起來很天真，我是新手。

Answer 1

我沒有使用這些包，但它看起來像你的ref和使用this的問題。 我通常將 class 組件用於任何需要 ref 的組件，因此您可以嘗試像這樣編寫 Screen2：

class Screen2 extends Component {
  camera;

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

基本上，當Screen2掛載時，您使用一個名為camera的空成員來實例化組件。 一旦相機組件呈現，它將對自己的引用分配給Screen2的camera成員。 然后該 ref 將讓您直接操作您的相機組件（使用this.camera ）。