来自子组件的 React Native Navigation答案

【问题标题】：React Native Navigation from Child Components来自子组件的 React Native Navigation
【发布时间】：2019-12-07 03:11:32
【问题描述】：

我正在尝试实现屏幕之间的简单导航，但出现此错误：

Undefined is not an object 'this.props.navigate'

AppNavigator.js

let AppNavigator = createStackNavigator({
  Signup: 
  { screen: SignupScreen, 
    navigationOptions: {
      header: null
    }

  },
  Login: { screen: LoginScreen,
    navigationOptions: {
      header: null
    } 
  },
},{
  initialRouteName: "Signup"
});

SignupScreen.js

<View>
 <SignupForm/>
</View>

SignupForm.js

const { navigate } = this.props.navigation;
<Text onPress={() =>
       navigate('Login')
}>
 ¿Allready have an account? Sign in
</Text>

我想问题是在子组件情况下还有一些额外的事情要做。请帮忙。

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation

【解决方案1】：

您应该将navigation 传递给SignupForm。在以下 2 个解决方案中选择 1 个

<View>
 <SignupForm navigation={this.props.navigation} />
</View>

或

在 SignupForm.js 中

import { withNavigation } from 'react-navigation';

export default withNavigation(SignupForm);

【讨论】：

使用了第一个解决方案（在尝试了很多东西，包括第二个解决方案之后）.. 非常感谢！

【解决方案2】：

如果您使用单独的组件，则必须使用 withNavigation 请参阅有关 withNavigation 的文档：here

【讨论】：

【解决方案3】：

您可能错过了将AppNavigator 包装在NavigationContainer 中，然后再在其他地方使用它。

在您的 AppNavigator.js

中

import { createAppContainer } from 'react-navigation'; // add this
import { createStackNavigator } from 'react-navigation-stack'; // i trust you've already got this

let AppNavigator = createStackNavigator({
  Signup: 
  { screen: SignupScreen, 
    navigationOptions: {
      header: null
    }    
  },
  Login: { screen: LoginScreen,
    navigationOptions: {
      header: null
    } 
  },
},{
  initialRouteName: "Signup"
});

export default createAppContainer(AppNavigator); // this is important!

我实际上并不认为您需要做任何特别的事情来让子组件工作。 AppContainer 用于确保将正确的道具传递给子组件。请参阅documentation 了解更多上下文。

【讨论】：