带反应导航的 DrawerNavigation 标题

Question

我在 ReactNative 上，我正在使用 native-base 和 react-navigation npm。

我明白了，我的问题是我如何才能有一个标题，直到按钮“主页”，我查看了 react-navigation 的文档，但它并没有真正被清除。

https://github.com/react-community/react-navigation/blob/master/docs/api/navigators/DrawerNavigator.md

像这样（图片是固定的，只是在这里放个标志）

原文由 Erased 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以为抽屉实现自定义内容组件。在那里，您还可以使用 DrawerItems 简单地呈现导航项。例如：

 import React from 'react'
import { Text, View } from 'react-native'
import { DrawerItems, DrawerNavigation } from 'react-navigation'

const DrawerContent = (props) => (
  <View>
    <View
      style={{
        backgroundColor: '#f50057',
        height: 140,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'white', fontSize: 30 }}>
        Header
      </Text>
    </View>
    <DrawerItems {...props} />
  </View>
)

const Navigation = DrawerNavigator({
  // ... your screens
}, {
  // define customComponent here
  contentComponent: DrawerContent,
})

原文由 madox2 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于抽屉导航，您可以添加自己的页眉和页脚并使用 contentComponent 配置创建自己的样式：

首先 import { DrawerItems, DrawerNavigation } from 'react-navigation' 然后

标头在 DrawerItems 之前：

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView> 。

DrawerItems 之后的页脚：

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView> 。

原文由 Saeed Heidarizarei 发布，翻译遵循 CC BY-SA 3.0 许可协议