在儿童视图中导航

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')}} />
);

并在父中将您的JSX包装在<View/>中

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