在子视图中导航

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;

这是错误：

  

未定义不是评估_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>