React-Navigation 在 TabRouter 内的 StackNavigator 中隐藏 tabBar

Question

一旦我们进入 TabRouter 中的 StackNavigator 中，隐藏 tabBar 就会出现问题。

我正在使用 navigatorOption，但它似乎没有做任何事情。

navigationOptions: {tabBarVisible: false}

可以通过https://snack.expo.io/Sk4fQHAfZ访问expo.io

import React from 'react';
import {
  Button,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  createNavigator,
  createNavigationContainer,
  TabRouter,
  addNavigationHelpers,
  StackNavigator,
} from 'react-navigation';

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <Text>{banner}</Text>
    <Button
      onPress={() => {
        navigation.goBack(null);
      }}
      title="Go back"
    />
  </ScrollView>
);

const NestedMyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <Text>{banner}</Text>
    <Button
      onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
      title="Go to a profile screen"
    />
    <Button
      onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
      title="Go to a photos screen"
    />
  </ScrollView>
);

const MyNotificationsScreen = ({ navigation }) => (
  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
);

const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner="Settings Screen" navigation={navigation} />
);

const MyPhotosScreen = ({ navigation }) => {
  let params = navigation.state.routes[navigation.state.index].params;
  // let params = navigation.state.params;
  return <MyNavScreen
    banner={`${params.name}'s Photos`}
    navigation={navigation}
  />
};
MyPhotosScreen.navigationOptions = {
  title: 'Photos',
};

const MyProfileScreen = ({ navigation }) => {
  let params = navigation.state.routes[navigation.state.index].params;
  // let params = navigation.state.params;
  return <MyNavScreen
    banner={`${params.mode === 'edit' ? 'Now Editing ' : ''}${params.name}'s Profile`}
    navigation={navigation}
  />
};

const CustomTabBar = ({ navigation }) => {
  const { routes } = navigation.state;
  return (
    <View style={styles.tabContainer}>
      {routes.map(route => (
        <TouchableOpacity
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const SimpleStack = StackNavigator({
  NestedHome: {
    screen: NestedMyNavScreen
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
    navigationOptions: {tabBarVisible: false}
  },
  Photos: {
    path: 'photos/:name',
    screen: MyPhotosScreen,
  },
});

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <View style={styles.container}>
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
      <CustomTabBar navigation={navigation} />
    </View>
  );
};

const CustomTabRouter = TabRouter(
  {
    Home: {
      screen: SimpleStack,
      path: '',
    },
    Notifications: {
      screen: MyNotificationsScreen,
      path: 'notifications',
    },
    Settings: {
      screen: MySettingsScreen,
      path: 'settings',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Home',
  }
);

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    flexDirection: 'column',
    justifyContent: 'space-between',
    flex: 1
  },
  tabContainer: {
    flexDirection: 'row',
    height: 48,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
  },
});

export default CustomTabs;

Answer 1

当您使用自定义 tabRouter 时，它似乎不起作用。

我得到它的工作删除它：https://snack.expo.io/H1NmvXE5b

（同样在您的博览会链接中，您错误地使用了{tabBar : {visible:false}}

您可以尝试在导航选项中的每个屏幕中设置标签栏按钮的样式

或

您可以按照这里的方式进行操作： （例如来自 native-base 文档的缘故：）

export default MainScreenNavigator = TabNavigator(
  {
    LucyChat: { screen: LucyChat },
    JadeChat: { screen: JadeChat },
    NineChat: { screen: NineChat }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate("LucyChat")}>
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("JadeChat")}>
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("NineChat")}>
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));

Answer 2

问题是您只能为呈现给定屏幕的导航器设置导航选项。您想要隐藏标签栏的屏幕由 stacknavigator 呈现，它没有 tabBarVisible 导航选项。

此文档链接更详细地解释了：

https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header

解决方案是在你的 stackNavigator 中设置导航选项，由 tabNavigator 呈现。您可以使用函数来改变每个屏幕的导航选项。以下是文档中的示例：

https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header

这是另一个简单的例子：

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen
  },
  {
    initialRouteName: "Home",
  }
);

HomeStack.navigationOptions = ({ navigation }) => {
  // get the name of the route
  const { routeName } = navigation.state.routes[navigation.state.index];

  if (routeName === 'Settings'){
    tabBarVisible = false;
  }
  else{
    tabBarVisible = true;
  }
  return {
    tabBarVisible, // this now varies based on screen
    tabBarLabel: "Search", // this is the same for all screens
  };
};

export default createBottomTabNavigator(
  {
    HomeStack,
  })