may*_*til 5 navigation reactjs react-native react-navigation
我使用的createMaterialTopTabNavigator
是react-navigation,其中我有两个单独的屏幕UpdatesStack
,ShopsStack
并且我想从这些屏幕导航到其他屏幕,所以我写的像这样<Toptab navigation={this.props.navigation} />
,它在出现红色屏幕错误后向我显示。
如果我这样写<Toptab />
,则没有错误,但我无法导航。
所以我该如何解决这个问题并能够导航。
码
class Parenthome extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<ToolbarAndroid
style={styles.toolbar}
title="Toolbar"
titleColor="#ff6600"
/>
<Toptab navigation={this.props.navigation} />
</View>
);
}
}
const UpdatesStack = createStackNavigator(
{
Updates: { screen: Home }
},
{
initialRouteName: "Updates"
}
);
const ShopsStack = createStackNavigator(
{
Shops: { screen: Conshop }
},
{
initialRouteName: "Shops"
}
);
const Toptab = createMaterialTopTabNavigator({
Updatestab: { screen: UpdatesStack },
Shopstab: { screen: ShopsStack }
});
export default Parenthome;
Run Code Online (Sandbox Code Playgroud)
我知道已经很晚了,但是只是为那些在搜索引擎上迷迷糊糊的人解答:
为什么不导出默认的TopTab本身。在您的用例中,似乎不需要将TopTab与ParentTheme组件一起包装。您可以设置TopTab导航器本身的样式,并使其像任何其他组件一样呈现。
如果必须包装TopTab,除了导航道具外,还需要可访问TopTab中的路由器。这样,它们都引用相同的路由器。简而言之,添加ParentTheme:
静态路由器= TopTab.router;
查看自定义导航器以获取更多信息。https://reactnavigation.org/docs/en/custom-navigators.html
归档时间: |
|
查看次数: |
3238 次 |
最近记录: |