Question

我正在使用react-navigation的createBottomTabNavigator作为react-native中的tab组件。问题是我得到了不必要的顶部标题。

我想删除顶部标题。请帮助我。

这是我的导航代码。

import HomeContainer from 'src/mainView/homeContainer'
import CameraPage from 'src/mainView/pages/cameraPage'
import CarOwnerVoicePage from 'src/mainView/pages/carOwnerVoicePage'
import ProfileContainer from 'src/profile'

const TabNavigator = createBottomTabNavigator(
  {
    home: {screen: HomeContainer},
    carOwnerVoice: {screen: CarOwnerVoicePage},
    camera: {screen: CameraPage},
    profile: {screen: ProfileContainer}
  },
  { 
    headerMode: 'none' ,
    tabBarOptions: {
      labelStyle: {
        fontSize: 15,
        marginBottom: 10,
        padding: 0,
      },
    },
  }
);

export default createAppContainer(TabNavigator);

Answer 1

这是我的错误。此TabNavigator用作另一个导航器中的屏幕，这就是问题所在。

const MainView = createAppContainer(TabNavigator);

MainView.navigationOptions={
  header: null
}

export default MainView;

我更改了代码，现在可以使用了。感谢您的努力和建议。

Answer 2

您可以从here中找到更多描述。

请尝试以下代码，这可能会解决您的问题。

const TabNavigator = createBottomTabNavigator(
  {
    home: {screen: HomeContainer},
    carOwnerVoice: {screen: CarOwnerVoicePage},
    camera: {screen: CameraPage},
    profile: {screen: ProfileContainer}
  },
  { 
    tabBarOptions: {
      labelStyle: {
        fontSize: 15,
        marginBottom: 10,
        padding: 0,
      },
    },
  }
);

TabNavigator.navigationOptions={
    header:null,
}

export default createAppContainer(TabNavigator);

Answer 3

如果您要隐藏在特定屏幕上而不是这样做：

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

我在反应导航中得到了意外的顶部标题

3 个答案: