在子视图中导航

Question

我正在我的 react-native 应用程序的屏幕之间创建导航，但是我有一个问题，我有一个父视图，并且每当我尝试将导航作为子视图的道具传递时，它都会在其中呈现一个子视图给我一个错误，谁能告诉我我应该如何通过它？这是我尝试做的：

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>