问对特定屏幕不隐藏本机选项卡
EN

Stack Overflow用户

提问于 2018-09-08 03:34:26

回答 3查看 1.7K关注 0票数 0

我用的是反应导航。

我在createBottomTabNavigator中使用createBottomTabNavigator。

我想隐藏位于AccountTab中的SignInScreen的选项卡栏，但它不起作用。

export default createBottomTabNavigator({
    HomeTab: { screen: createStackNavigator ({
      HomeTabScreen     : { screen:HomeTabScreen },
      ProductScreen     : { screen:ProductScreen },
    }),
      initialRouteName: 'HomeTabScreen',
    },

    AccountTab: { screen: createStackNavigator ({
      AccountTabScreen  : { screen:AccountTabScreen },
      RegisterScreen    : { screen:RegisterScreen },
      SignInScreen      : { screen:SignInScreen },
    }),
      initialRouteName: 'AccountTabScreen',
    },

  },
    {
        initialRouteName: 'HomeTab',        
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let name;
                if (routeName === 'HomeTab') {
                  name = "Home";
                } else {
                  name = "Account";
                }
                return <Text style={[styles.titleStyle, focused ? styles.titleSelectedStyle : {}]}>{name}</Text>;
            },
        }),
});

我正在尝试三种方法，但不起作用。

方法如下

1)在上面的代码中应用了tabBarVisible:false，因此它为所有屏幕隐藏了选项卡条。

2)在上述代码中应用了tabBarVisible类tabBarLabel函数函数。

3)将tabBarVisible:false应用于navigationOptions in SignInScreen.中。

如何隐藏SignInScreen选项卡

reactjs

react-native

react-navigation

tabbar

stack-navigator

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-09-08 08:36:58

有一个git线程可能对您有帮助：https://github.com/react-navigation/react-navigation-tabs/issues/19#issuecomment-410857516

基本上，您应该尝试更改AccountTab导航选项，如下所示：

AccountTab: { 
  screen: createStackNavigator ({
        AccountTabScreen  : { screen:AccountTabScreen },
        RegisterScreen    : { screen:RegisterScreen },
        SignInScreen      : { screen:SignInScreen },
  }),
  initialRouteName: 'AccountTabScreen',
  navigationOptions: ({navigation}) => {
    let { routeName } = navigation.state.routes[navigation.state.index];
    let navigationOptions = {};

    if (routeName === 'SignInScreen') {
        navigationOptions.tabBarVisible = false;
    }

    return navigationOptions;
  }
},

票数 2

Stack Overflow用户

发布于 2018-09-08 04:29:29

const NestedNavigator = StackNavigator({
    ScreenOne: {
        screen: ScreenOneComponent
    },
    ScreenTwo: {
        screen: ScreenTwoComponent
    }
});

class NestedNavigatorWrapper extends React.Component {
    constructor(props)  {
        super(props);
    }
    render() {
        return (
            <DashboardNavigator screenProps={{ rootNavigation: this.props.navigation }} />
        );
    }
}
const AppNavigator = StackNavigator({
    Home: {
        screen: HomeComponent
    },
    Nested: {
        screen: NestedNavigatorWrapper
    }
});

票数 0

Stack Overflow用户

发布于 2020-02-09 10:31:22

如果要将tabNavigation隐藏在screen2( StackNavigator的一部分)中，

navigationOptions: ({navigation}) => {
      let {routeName} = navigation.state.routes[navigation.state.index];
      let navigationOptions = {};
      console.log('Route Name=' + JSON.stringify(routeName));

      if (routeName === 'Screen') {
        navigationOptions.tabBarVisible = false;
      }

      return navigationOptions;