具有反应导航的DrawerNavigation标题

Question

我在ReactNative上,我正在使用native-base和react-navigation npm.

我得到了这个,我的问题是如何有一个标题,直到按钮"Home",我查看了反应导航的文档,但它并没有真正清除.

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

像这样(图像是固定的,只是在这里放置一个徽标)

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