Reactnative 带有 reactnavigation 的 DrawerNavigation 标头

发布于06月09日

我使用的是ReactNative，我使用的是native base和ReactNavigation npm.

我得到了这个，我的问题是，我如何能有一个标题，直到"主页"按钮，我查看了react-navigation 的文档，但它并没有真正清除.

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

Like this (the image is fix, it's just to put a logo here)

推荐答案

您可以为抽屉实现自定义内容组件.在那里，你也可以简单地使用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,
})