Навигация в детском представлении

Question

Я создаю навигацию между экранами в своем реактивном приложении, но у меня есть проблема, у меня есть родительское представление, и внутри него отображается дочернее представление всякий раз, когда я пытаюсь передать навигацию в качестве опоры для дочернего представления.дает мне ошибку, может кто-нибудь сказать, пожалуйста, как я должен пройти?вот что я пытался сделать:

App.js:

import React, { Component } from 'react';
import Parent from './components/Parent';
import {
  createStackNavigator,
} from 'react-navigation';

const App = createStackNavigator({
  Parent: { screen: Parent },
});

Родительский компонент:

import React, { Component } from 'react';
import { Text } from 'react-native';
import Child from './Child';


 class Parent extends Component {

   render() {
     return (
       <Text>Parent Component</Text>
       <Child />
     );

 export default Parent; 

Дочерний компонент:

 import React, { Component } from 'react';
 import { TouchableOpacity } from 'react-native';
 class Child extends Component {
   render() {
     const { navigate } = this.props.navigation;
     return(
       <TouchableOpacity onPress={() => {props.navigation.navigate('Parent')}}>
      );   
 export default Child;

, и это ошибка:

undefined не является объектом, оценивающим _this.props.navigation

Answer 1

Вам необходимо явно передать навигационные реквизиты компоненту <Child/> как

Родитель

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

Дети

const { navigate } = this.props.navigation;
  return(
     <TouchableOpacity onPress={() => {navigate('Parent')}} />
);

и в Parent заверните свой JSX в <View/>

<View>
  <Text>Parent Component</Text>
  <Child navigation={this.props.navigation}/>
</View>