帶有反應導航的 DrawerNavigation 標題

Question

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

我得到了這個，我的問題是如何有一個標題，直到按鈕“主頁”，我查看了 react-navigation 的文檔，但它並沒有真正清除。

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

Answer 2

對於抽屜導航，您可以添加自己的頁眉和頁腳並使用contentComponent配置制作自己的樣式：
首先import { DrawerItems, DrawerNavigation } from 'react-navigation'然后

DrawerItems之前的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> 。

Answer 3

您可以使用抽屜導航配置中的contentComponent選項來實現它。 根據所需的配置級別，您可以通過兩種方式執行此操作：

方法一。

來自 react-navigation 的DrawerItems （自行處理導航）-

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

Answer 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