использование ответной нативной камеры с реагирующей нативной навигацией - PullRequest
Новая
       35

использование ответной нативной камеры с реагирующей нативной навигацией

0 голосов
/ 10 апреля 2020

Я только что начал реагировать на родную систему и создал многоэкранное приложение 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 использует функции для экранов).

Извиняюсь, если я звучу наивно, я новичок, чтобы реагировать.

1 Ответ

0 голосов
/ 10 апреля 2020

Я не использовал эти пакеты, но похоже на проблему с вашим 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).

...