自定义解决方案

Question

如何从TabNavigator隐藏某些TabBar项目。是否有某个var date=inputSheet.getRange('A2').getValue();选项，其中包含TabBarOptions键（true / false）？

visible

Answer 1

单个标签没有“可见”选项，但有talk of its implementation。

可以仅渲染某些选项卡。您可以通过将TabNavigator传递给您希望在特定时间出现的特定选项卡来动态呈现它们。您不必将参数硬编码到TabNavigator（），而是将参数设置为表示要渲染的选项卡的对象，然后您可以随时更改此对象。

请参阅here，以便巧妙地实施此功能。

Answer 2

DispatchQueue.main.async的问题在于，它仅隐藏所选屏幕的当前导航（标签）。但是不会隐藏/显示标签。

tabBarOptions

自定义解决方案

我制作了一些特殊的课程来使用tabBarOptions: { visible: false }

createMaterialTopTabNavigator

标签的实现：

export default class CustomTabsNavigator extends Component {
  // Final navigation setup with screens
  TabsNavigation;

  constructor(props) {
    super(props);
    // Only this is necessary if you just want to hide/show without change it.
    this._setScreens();
  }
  // This is necessary if you want to hide/show depending on some user behavior
  componentDidUpdate(prevProps) {
    // Add your condition to avoid infinite renders
    if (prevProps.foo === this.props.foo) return;
    this._setScreens();
  }
  // Actual code to show/hide based on props.
  _setScreens = () => {
    const { isAdmin } = this.props;
    const screens = {};
    const settings = {
      tabBarOptions: {
        style: {...}
      }
    };
    // Set tabs depending on user and state
    if (isAdmin) {
      screens.Dashboard = {
        screen: DashboardScreen,
        navigationOptions: { ... }
      };
    }
    screens.Home = { screen: HomeScreen };
    this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
    // Since we are not using setState
    this.forceUpdate();
  };

  render() {
    // AppContainer is required in react-native version 3.x
    const { props } = this;
    const NavigatorTabs = createAppContainer(this.TabsNavigation);
    return <NavigatorTabs screenProps={{ ...props }} />;
  }
}

Answer 3

我的解决方案是返回一个自定义 tabbarbutton，它是：高度和宽度设置为 0 的视图，工作正常

<Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
    options={{
        tabBarButton: () => (
            <View style={{width:0, height:0}}></View>
        ),
        tabBarVisible:false //hide tab bar on this screen

    }}
/>

在TabNavigator中隐藏TabBar项

3 个答案:

自定义解决方案

标签的实现：