抽屜導航頭與react-navigation

Question

我在ReactNative上，我使用本機基礎和react-navigation npm。

我得到了這個，我的問題是我如何能有一個標題，直到按鈕「家」，我看着反應導航文件，但它並沒有真正清除。

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：

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選項在抽屜導航配置中。有兩種方法可以做到這基於配置的要求的水平：

方法1.

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

這使用滾動視圖爲其下面的菜單項創建固定標題。

方法2：

創建自己的自定義組件 -

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

這裏SideMenu是自己的組件在抽屜中顯示。您可以使用react-navigation NavigationActions.navigate（屏幕）來處理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} 
}); 

的用戶界面： https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/SideBar/SideBar.js https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/HomeScreen/index.js