总而言之 - 我的问题是,是否有另一种方法来实现这个侧边栏选项卡,可能/希望使用 TabNavigator?还是我下面的方法不是实现细节和面向未来的?
我正在尝试创建一个带有标签的标签导航器。我无法做到这一点,所以我用以下结构TabNavigator
嵌套了 a :StackNavigator
class PageShowroom extends React.Component {
childnav = {}
navRef = el => this.childnav.navigate = el && el._navigation.navigate
navigateChild(...args) {
this.childnav.navigate(...args);
}
render() {
return (
<View style={{flexDirection:'row'}}>
<View>
<Button onPress={this.navigateChild('blah')} title="Blah" />
</View>
<ShowroomNavigator ref={this.navRef}/>
</View>
)
}
}
const ShowroomNavigator = StackNavigator(
{ catalog: {screen:ScreenCatalog}, orders:{screen:ScreenOrders}},
{ initialRouteName: 'catalog', headerMode: 'none' }
);
我不喜欢它,但它有效。这是一个截屏视频 - https://youtu.be/r33WvOnb6jU
我不喜欢的东西是:
- 周围有一个阴影,
ShowroomNavigator
它是一个StackNavigator
. 我不得不通过使用 z-index 技巧和包装来隐藏这个阴影(上面没有显示代码) - 从左边缘滑动嵌套路由器不会返回。
- 第三个问题,也是主要问题,是我认为我依赖于一个实现细节:
我们看到我附加了一个ref
到ShowroomNavigator
. 回调触发两次,ref
一次是挂载,一次是卸载。挂载时el
是{props, context, refs, updated, subs, _isStateful, _handleOpenURL, dispatch, state, _reactInternalInstance, _navigate}
,卸载时el
是null
。
所以我正在利用el._navigation.navigate
,我担心这可能是一个实现细节。
所以我的问题是,是否有另一种方法来实现这个侧边栏选项卡,可能/希望使用 TabNavigator?或者我el._navigation
上面的方法不是实现细节并且是面向未来的?