react-native-tab-view

Question

我想知道以下是否可行...

我有一个 react-native-tab-view 的实例这下面有 3 个场景，但我只想在选项卡栏本身上显示其中 2 个是可选的。第三个场景实际上在那里，但隐藏起来，直到发生事件时自动显示（几秒钟）。

所以，我想要 UI 的以下内容：

标签栏：Scene A | Scene B
选项卡视图：Scene A | Scene B | Scene C

这可能吗？

Answer 1

您可以覆盖 renderTabBar 方法并创建您自己的方法

Answer 2

我的解决方案是更改 renderTabBar 我的实施方法以仅显示带有标题的选项卡。此外，如果我想临时显示 'hidden' 选项卡，这也有效，因为我可以在需要显示时动态更新它的标题。

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 3

我的解决方案是在返回 TabBar 之前更改 props.navigationState.routes。它将隐藏没有标题的选项卡，同时仍然可以导航。

 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={}
                    />
                )
            }}
        />
    )

react-native-tab-view - 隐藏特定的标签栏选项卡（不是场景）

react-native-tab-view - hide a specific tabbar tab (not the scene)

react-native