Невозможно перемещаться между экранами в реагирующей навигации 5

Question

Я разрабатываю реагирующую навигацию разными способами. Беда в последнем, что я пытался.

Я пытаюсь перейти от HomeScreen к DetailScreen с пользовательским компонентом (вид кнопки депортирован). Проблема заключается в следующем: «TypeError: Undefined не является объектом (оценивается как« this.prop.navigation.navigate »)

Может ли кто-нибудь помочь мне понять проблему? (Примечание: я использую реагирующую навигацию 5)

Я даю вам различные файлы:

//fichier app.js

import 'react-native-gesture-handler'
import React from 'react';

import HomeScreen from './src/screens/HomeScreen'
import DetailScreen from './src/detailscreen'

import {NavigationContainer} from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

файл HomeScreen

import React from 'react';
import { View, Text, Button } from 'react-native';
import ButtonNav from './Button';


class HomeScreen extends React.Component  {
  render() {
    console.log('Home' + this.props)
    return (
      <View 
        style={{ alignItems: 'center', justifyContent: 'center'}}>

        <View 
          style={{height: 120, alignItems: 'center', justifyContent: 'center'}}>
          <Text>Zone 1</Text>
        </View>

        <ButtonNav/>

      </View>
    )
  }
}


export default HomeScreen;

Кнопка

//Button

import React from 'react';
import { View, Text, Button } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

class ButtonNav extends React.Component {

    render() {
      console.log(this.props.navigation)
      return (
        <View 
          style={{height: 120, alignItems: 'center', justifyContent: 'center' }}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Detail')}>
            <Text>Button</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }

  export default ButtonNav;

DetailScreen

//detail

import React  from 'react';
import { View, Text } from 'react-native';

class Detail extends React.Component {

  render() {
    console.log(this.props)
    return (
      <View 
      style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    )
  }
}

export default Detail;

Answer 1

У вас нет свойства навигации внутри класса Button, вы можете передать его следующим образом:

<ButtonNav
  navigation={this.props.navigation} />

Или вы можете передать событие onPress через реквизиты:

<ButtonNav
  onPress={() => this.props.navigation.navigate('Detail')} />

<TouchableOpacity
  onPress={this.props.onPress}>
  <Text>Button</Text>
</TouchableOpacity>

Answer 2

Так что в классе ButtonNav для этого класса нет реквизита.

включите часть кода в ваш класс.

constructor(props){
super(props);
}