从子组件响应本机导航

React Native Navigation from Child Components

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

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>

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

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

1.

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

  1. 在SignupForm.js
import { withNavigation } from 'react-navigation';

export default withNavigation(SignupForm);

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

在别处使用之前,您可能错过了将 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