从子组件响应本机导航
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>
或
- 在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。
我正在尝试在屏幕之间实现简单的导航,但出现此错误:
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>
或
- 在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。