javascript 如何在React Native中从Reac导航中禁用createDrawerNavigation中的header

bjp0bcyl 于 2023-04-04 发布在 Java

关注(0)|答案(3)|浏览(91)

背景

在构建React Native应用程序并使用React Navigation中的DrawerNavigator时，我最终需要自定义createDrawerNavigator附带的header。不过我发现我可以自定义createStackNavigator。

createStackNavigator

1.可以隐藏标头
1.可以自定义页眉。

createDrawerNavigator

1.无法隐藏标题
1.无法自定义页眉。

问题

如何隐藏或自定义在使用React Navigation中的createDrawerNavigator时自动添加到应用程序中的标题？

示例
createStackNavigator

我可以像这样隐藏使用createStackNavigator时出现的标题，*

const Secure = createStackNavigator(
  {
    Drawer: {
      screen: drawer,
    },
  },
  {
    initialRouteName: 'Drawer',
    headerMode: 'none',
  },
);

创建绘图导航

当使用createDrawerNavigator时，我没有尝试隐藏或自定义头部。我也搜索了文档，找不到任何关于如何在React Native导航版本3中处理createDrawerNavigator头部的内容。

JavaScript

来源：https://stackoverflow.com/questions/54340824/how-to-disable-header-in-createdrawernavigation-from-reac-navigation-in-react-na

3条答案

按热度按时间

0yycz8jy1#

此代码将帮助自定义抽屉组件的header none。

const customDrawerContentComponent = (props) => {
   Contact: { 
    screen: ContactScreen ,
    navigationOptions: () => ({
      header: null
    })
   }
}



const AppDrawerNavigator = createDrawerNavigator({
  Home: { 
    screen: HomeScreen,
    navigationOptions: () => ({
       header: null
    })
  }
}, {
  contentComponent: customDrawerContentComponent,
})

赞(0）回复(0）举报 2023-04-04

fd3cxomn2#

就像Kazi说的答案一样，你可以通过headerMode：null对drawerNavigators和stacknavigator隐藏header。这样做的问题是，你最终根本没有header。
因此，如果你想要特定屏幕的标题，在react-native-elements上有一个header组件，你可以将它添加到你想要标题的每个屏幕上。
下面是一个例子：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

在这个例子中，我不得不将它 Package 在React.Fragment标签上，因为我将这部分代码放在了render方法的开头。我还添加了一个标题到屏幕和hamburguer按钮来打开抽屉。
所以，基本上我所做的是，隐藏stackNavigators和drawerNavigators上的头文件，然后将组件添加到您确实需要头文件的每个屏幕上。

赞(0）回复(0）举报 2023-04-04

kq0g1dla3#

React Navigation v6
screenOptions={{headerShown:false}}
最小设置示例：

const AppNavigator = createDrawerNavigator();

<AppNavigator.Navigator
            initialRouteName="SomeName"
            screenOptions={{headerShown:false}}>

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何在React Native中从Reac导航中禁用createDrawerNavigation中的header

3条答案

相关问题

热门标签

最新问答