时间戳

首页 > 解决方案 > 使用带有 react-native-navigation 的 react-native-camera

javascript - 使用带有 react-native-navigation 的 react-native-camera

问题描述

我刚刚开始 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')在screen2中。

react-native-navigation虽然当我将应用程序定义为一个类并将相机放在第一个屏幕上时不会出现此错误（并且由于使用屏幕功能而无法导航）。

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

标签： javascriptandroidreact-nativereact-native-navigationreact-native-camera

解决方案

我没有使用过这些软件包，但它看起来像您ref和使用this. 我通常将类组件用于需要引用的任何内容，因此您可以尝试像这样编写 Screen2：

class Screen2 extends Component {
  camera;

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

基本上，在Screen2挂载时，您使用一个名为camera. 一旦相机组件渲染，它就会将自身的引用分配给Screen2'scamera成员。然后该 ref 将让您直接操作您的相机组件（使用this.camera）。

推荐阅读