从子组件响应本机导航

Question

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

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>

我想问题是在子组件情况下还有其他事情要做。请帮忙。

Answer 1

你应该把navigation传递给SignupForm。选择以下 2 种解决方案中的 1 种

1.

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

或

2. 在注册表单中.js

import { withNavigation } from 'react-navigation';
export default withNavigation(SignupForm);

Answer 2

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

Answer 3

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

在您的应用程序导航器中.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用于确保将正确的 props 传递给子组件。有关更多上下文，请参阅文档。