javascript - 带 react 导航的 DrawerNavigation 标题

Question

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

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

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

像这样(图片是固定的，只是在这里放个logo)

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,
})