Question

我无法同时显示标题和底部标签导航。

这是我的TabNavigator->

const TabNavigator = createBottomTabNavigator(
    {
        Main: Screens.MainContainer,
        Main2: Screens.MainContainer,
        Main3: Screens.MainContainer,
        Main4: Screens.MainContainer,
    },
    {
        animationEnabled: true,
        showIcon: false,
        showLabel: true,
        activeTintColor: 'blue',
        inactiveTintColor: 'gray',
    }
)

const StackNavigator = createStackNavigator(
    {
        Opening: Screens.OpeningContainer,
        SignupSide: Screens.SignupSideContainer,
        SignupSkills: Screens.SignupSkillsContainer,
        SignupCredentials: Screens.SignupCredentialsContainer,
        SignupValidation: Screens.SignupValidationContainer,
        Signin: Screens.SigninContainer,
        Main: Screens.MainContainer,
        ServerDown: Screens.ServerDownContainer,
        TabNavigator,
    },
    {
        initialRouteName: 'Opening',
    }
)

export default createAppContainer(StackNavigator)

除了MainContainer之外，我所有的屏幕都已通过该navigationOptions->

停用了标题

  static navigationOptions = ({ navigation }) => ({ header: null })

我的屏幕OpeningContainer（initialRoute），只需在执行一些API调用后将用户重定向到MainContainer

我的MainContainer得到了这个标题->

static navigationOptions = ({ navigation }) => ({
    headerLeft: <HeaderSearchBar />,
  })

当我以当前状态打开应用程序时，底部的标签栏没有出现。
如果我将initialRoute更改为“ TabNavigator”，则会将应用程序引导至主屏幕（TabNavigator列表上的第一个），并显示选项卡底部的栏，但是会显示标题，但里面的SearchBar丢失了（它是一个空标题）。

我尝试了许多不同的方法来实现它，但我想不出如何正确地使页眉和底部的标签栏正常工作。

有人有主意吗？

Answer 1

下面的代码可能有用

const navOptionHandler = (navigation)=> ({
      header: null 
      }); 

const StackNavigator = createStackNavigator(
      {
       Opening: {Screens.OpeningContainer,
          navigationOptions: navOptionHandler},
        SignupSide: Screens.SignupSideContainer,
        SignupSkills: Screens.SignupSkillsContainer,
        SignupCredentials: Screens.SignupCredentialsContainer,
        SignupValidation: Screens.SignupValidationContainer,
        Signin: Screens.SigninContainer,
        Main: Screens.MainContainer,
        ServerDown: Screens.ServerDownContainer,
        TabNavigator,
        },
        {
        initialRouteName: 'Opening',
        }
        )

带有createBottomTabNavigator的createStackNavigator，标题或选项卡未出现

1 个答案: