带有 react-navigation 的 DrawerNavigation 标头答案

【问题标题】：Header for DrawerNavigation with react-navigation带有 react-navigation 的 DrawerNavigation 标头
【发布时间】：2017-06-08 11:51:33
【问题描述】：

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

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

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

这样（图片修好了，只是在这里放个logo）

【问题讨论】：

标签： javascript react-native navigation-drawer react-native-android react-native-ios

【解决方案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,
})

【讨论】：

【解决方案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>.

【讨论】：

【解决方案3】：

您可以使用抽屉导航配置中的 contentComponent 选项来实现它。根据所需的配置级别，您可以采用两种方法：

方法一。

DrawerItems 来自 react-navigation（自行处理导航）-

import {DrawerItems, DrawerNavigation} from 'react-navigation';
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: (props) =>
<View style={{flex: 1}}>
<Text>Header</Text>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</View>
});

这会为下面的菜单项创建一个带有滚动视图的固定标题。

方法二。

创建您自己的自定义组件 -

import { DrawerNavigation } from 'react-navigation'
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: props => <SideMenu {...props}>
});

这里的 SideMenu 是您自己的要在抽屉中显示的组件。您可以使用 react-navigation NavigationActions.navigate(screen) 来处理菜单项的 onPress 路由。

第二种方法更详细的解释https://medium.com/@kakul.gupta009/custom-drawer-using-react-navigation-80abbab489f7

【讨论】：

【解决方案4】：

嵌套导航器应该是这样的：

const Router = StackNavigator({
    Home: {screen: HomeScreen},
    Test: {screen: TestScreen}
}, {
    navigationOptions: {
        headerStyle: {backgroundColor: '#2980b9'},
        headerTintColor: '#fff'
    }
});

const Drawer = DrawerNavigator({
    App: {screen: Router}
});

对于用户界面：

1) https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/SideBar/SideBar.js

2)https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/HomeScreen/index.js

【讨论】：