1

总而言之 - 我的问题是,是否有另一种方法来实现这个侧边栏选项卡,可能/希望使用 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

我不喜欢的东西是:

  1. 周围有一个阴影,ShowroomNavigator它是一个StackNavigator. 我不得不通过使用 z-index 技巧和包装来隐藏这个阴影(上面没有显示代码)
  2. 从左边缘滑动嵌套路由器不会返回。
  3. 第三个问题,也是主要问题,是我认为我依赖于一个实现细节:

我们看到我附加了一个refShowroomNavigator. 回调触发两次,ref一次是挂载,一次是卸载。挂载时el{props, context, refs, updated, subs, _isStateful, _handleOpenURL, dispatch, state, _reactInternalInstance, _navigate},卸载时elnull

所以我正在利用el._navigation.navigate,我担心这可能是一个实现细节。

所以我的问题是,是否有另一种方法来实现这个侧边栏选项卡,可能/希望使用 TabNavigator?或者我el._navigation上面的方法不是实现细节并且是面向未来的?

4

0 回答 0