react本机-选项卡-视图-隐藏特定的选项卡(而不是场景)

Question

我想知道是否有可能.

我有一个react-native-tab-view实例，下面有3个场景，但我只想在选项卡本身上显示其中的2个可选的场景。第三个场景是有效的，但隐藏直到自动显示(几秒钟)，如果一个事件发生。

因此，我想为UI提供以下内容：

Scene B

• Tab视图：
• Tab Bar：Scene A / Scene B，Scene B，
• ，Tab，Scene A，
• ，Scene A，Scene B，Scene B，Scene A，Scene B，Scene A，Scene B，Scene B，

这个是可能的吗？

Answer 1

我的解决方案是修改实现的renderTabBar方法，使之只显示带有标题的选项卡。此外，如果我想暂时显示“隐藏”选项卡，这也可以工作，因为我可以动态更新它的标题，当我需要它显示。

renderTabBar(props: *) {
    const { index, routes } = props.navigationState;
    const currRoute = routes[index];
    const navigationState = {
      index: currRoute.title==='' ? routes.length : index,
      routes: routes.filter(route => route.title!=='')
    };
    const jumpToIndex = i => props.jumpToIndex(routes.indexOf(navigationState.routes[i]));

    return (
      <TabBar
        ...
        navigationState={navigationState} 
        jumpToIndex={jumpToIndex}
      />
    );
  }

Answer 2

您可以重写renderTabBar方法并创建自己的

Answer 3

我的解决方案是在返回props.navigationState.routes之前更改TabBar。它将隐藏标签没有标题，而导航仍然可能。

 return (
        <TabView
            navigationState={{
                index,
                routes
            }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width, height: layout.height }}
            tabBarPosition={'bottom'}
            renderTabBar={(props) => {
                props.navigationState.routes = routes.filter(
                    (route) => route.title
                ) 
                return (
                    <TabBar
                        {...props}
                        style={}
                        renderLabel={({ route, focused }) => (
                                <Text style={} accessibilityLabel={} >
                                    {route.title}
                                </Text>
                            )
                        
                        labelStyle={}
                    />
                )
            }}
        />
    )