React Native：createBottomTabNavigator标头：null不起作用

Question

我的App.js看起来像这样，其中有StackNavigator

export default class App extends Component {
  render() {
    return (
      <AppStackNavigator />
    );
  }
}


const AppStackNavigator = new StackNavigator({

  LoginScreen: { screen: LoginScreen },
  DashboardScreen: { screen: DashboardScreen },
  ImportantNumberScreen: { screen: ImportantNumberScreen },
  EventListScreen: { screen: EventListScreen },
});

我必须创建底部导航，所以我要使用react-navigation组件createBottomTabNavigator，在其中我要将标题设置为null 所以我尝试了以下代码

static navigationOptions = {
        header: null,//works with createStackNavigator but not with createBottomTabNavigator
    }

也尝试过

export default createBottomTabNavigator({
    HomeScreen: {screen : HomeScreen,navigationOptions:{header:null}},
    GuestCardScreen: GuestCardScreen,
    MoreScreen: MoreScreen,
    StatementScreen: StatementScreen,
});

但不幸的是，这些代码不适用于createBottomTabNavigator

我正在使用

  

“反应导航”：“ ^ 2.17.0”

     

节点版本v10.11.0

     

npm版本v6.4.1

Answer 1

您应该设置如下所示的标签栏选项：

const TabNav = createBottomTabNavigator({
  HomeScreen: {screen : HomeScreen},
  GuestCardScreen: GuestCardScreen,
  MoreScreen: MoreScreen,
  StatementScreen: StatementScreen,
});

// just for hide tabbar header
const StackNavForTabs = createStackNavigator({
  tab: TabNav,
}, {
  header: null,
  headerMode: 'none'
});

//your main stack navigator
export default AppStack = createStackNavigator({
 otherStackRoutes: OtherRoute,
 tabStack: StackNavForTabs,
});

Answer 2

TabBar

const MainAppTab = createBottomTabNavigator({
[HOME_STACK]: {
  screen: Home,
},
[NOTIFACATION]: NotificationContainer,
[STINGER]: StingerContainer,
[MESSAGE]: MessageContainer,
[USER_PROFILE]: ProfileContainer
},
},
{
   // settings
});

主导航器

const AppNavigator = createStackNavigator({
  [WELCOME]: {
screen: WelcomeContainer,
},
    // other screens
[MAIN]: {
screen: MainAppTab,
navigationOptions: {
    header: null, <----- this will help you
},
},
}, {
    initialRouteName: WELCOME,
},
});