我按以下方式设置了堆栈导航器
const wishlizt = StackNavigator({
Splash: {screen: SplashScreen},
SignIn: {screen: SignInScreen},
SignUp: {screen: SignUpScreen},
Profile: {screen: ProfileScreen},
Home: {screen: MainScreenNavigator},
Chat: {screen: ChatScreen}
},
{
navigationOptions: {
title: 'Wishlizt',
header: {
style: {
backgroundColor: Colors.bgBrand,
elevation: null,
},
titleStyle: {
color: Colors.lightest
},
right: <HeaderRight />
}
},
initialRouteName: 'Splash'
});
如您所见,我在 header 中使用了一个组件 HeaderRight,其中包含一些图标 - 设置齿轮、配置文件等。我希望能够从这些图标的 TouchableOpacity onPress 方法进行导航。但该组件中缺少导航 Prop “this.props.navigation”。
官方文档页面有关于如何在顶级组件上调用导航的代码示例,并建议使用“ref”
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
我看不出这在我的例子中是如何工作的。有人可以帮忙吗?谢谢
巨大
最佳答案
header
属性可以是函数也可以是对象。当它是一个函数时,navigation
对象作为第一个参数传入,然后可以作为prop
传递给HeaderRight
组件.
navigationOptions: {
header: (navigation) => {
return {
style: {
backgroundColor: Colors.bgBrand,
elevation: null,
},
titleStyle: {
color: Colors.lightest
},
right: (<HeaderRight
navigation={navigation}
/>),
};
},
},
关于android - react 导航 : Missing prop at top level component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42899523/