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. 第三个问题，也是主要问题，是我认为我依赖于一个实现细节：

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

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

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

4

0 回答 0