抽屜沒有包括在反應導航中的標題

Question

嗨，朋友我在過去2天反應導航，我嘗試了很多事情（文檔似乎對初學者來說似乎並不明顯），所以現在我面臨這似乎有點複雜，我和所以我尋求建議和幫助進行further.following的情況/問題/情景我尋求的幫助幾個問題 -

1. 反應的導航不包括頭和狀態 ，我想實現類似gmail，但我結束了像this

我用下面的代碼塊，以達到這一點

import React, {Component} from 'react'; 
import { AppRegistry, View, BackAndroid, StatusBar,} from 'react-native'; 
import { 
    NavigationActions, 
    addNavigationHelpers, 
    StackNavigator, 
    DrawerNavigator 
} from 'react-navigation'; 


import LandingScreen from 'src/screens/landingScreen'; 
import Login from 'src/screens/login' 
import SignUp from 'src/screens/signUp' 
import ForgotPassword from 'src/screens/forgotPassword' 
import Dashboard from 'src/screens/dashboard' 
import UserProfile from 'src/screens/userProfile' 

export const Drawer = DrawerNavigator({ 
    Dashboard:{ 
    path:'/', 
    screen:Dashboard, 
    }, 
    UserProfile:{ 
    path:'/' 
    screen:UserProfile 
    }, 
}, { 
    initialRouteName: 'Dashboard', 
    contentOptions: { 
    activeTintColor: '#e91e63', 
    }, 
    headerMode: 'screen', 
}); 

const routesConfig = { 
    Landing:{screen:LandingScreen}, 
    Login: { screen: Login }, 
    SignUp: { screen: SignUp }, 
    ForgotPassword: { screen: ForgotPassword }, 
    Drawer:{screen:Drawer} 
}; 

export const AppNavigator = StackNavigator(routesConfig, { 
    initialRouteName: 'Drawer' 
}); 
AppRegistry.registerComponent('Riduk',() => AppNavigator); 

其他問題是如何應該我在我的應用程序在相同的屏幕

添加2個抽屜

Answer 1

這是你想解決的問題嗎？

https://blog.callstack.io/android-drawer-statusbar-done-right-for-react-native-7e85f01fc099

Answer 2

按我的知識，你必須做兩件事情：在導航堆棧的頂部 1.把抽屜控制。 2.設置translucent屬性格式狀態欄

的

<StatusBar 
       translucent 
       backgroundColor="rgba(0, 0, 0, 0.24)" 
       animated 
      /> 
      { Platform.OS === 'android' && Platform.Version >= 20 ? 
       <View 
        style={{ 
         height: 24, 
         backgroundColor: "#512DA8", 
        }} 
       /> 
       : null } 

請讓我知道，如果它的工作。

Answer 3

在DrawerNavigator中有一個用於標題的issue。

但是你可以通過使用內部DrawerNavigator StackNavigator修復

export const Drawer = DrawerNavigator({ 
    Dashboard:{ 
    path:'/', 
    screen: StackNavigator({ Screen1: { 
       screen: Dashboard 
      }}) 
    }, 
    UserProfile:{ 
    path:'/', 
    screen: StackNavigator({ Screen1: { 
       screen: UserProfile 
      }}) 
    }, 
}}); 

然後設置headerMode: 'none'到根StackNavigator

export const AppNavigator = StackNavigator(routesConfig, { 
    headerMode: 'none' 
}); 

這裏，AppNavigator是根StackNavigator和routesConfig具有上述DrawerNavigator等屏幕。

Answer 4

下面是一個簡單的例子：

const FooStackNavigator = StackNavigator({ 
    Foo: { 
    screen: FooScreen, 
    navigationOptions: { 
     title: 'Foo', 
    } 
    }, 
}); 
const BarStackNavigator = StackNavigator({...}); 

const MyDrawerNavigator = DrawerNavigator({ 
    FooStack: { 
    screen: FooStackNavigator, 
    navigationOptions: { 
     drawer:() => ({ 
     label: 'Foo', 
     }) 
    }, 
    }, 
    BarStack: { 
    screen: BarStackNavigator, 
    navigationOptions: { 
     drawer:() => ({ 
     label: 'Bar', 
     }) 
    }, 
    } 
}); 

const AppNavigator = StackNavigator({ 
    Drawer: { screen: MyDrawerNavigator }, 
}, { 
    headerMode: 'none', 
}); 

Answer 5

DrawerNavigator必須在上StackNavigator，這是我的方式來解決這個問題：

const navStack = StackNavigator({ 
    Home: { screen: Main, }, 
    Example01: { screen: Example01, }, 
    Example02: { screen: Example02, }, 
}); 

const navDrawer = DrawerNavigator({ 
    Home: { 
    screen: navStack, // Drawer over on StackNavigator 
    navigationOptions: { 
     drawerLabel: 'Home', 
     header: null, 
    } 
    }, 
    Example03: { 
    screen: Example03, 
    navigationOptions: { 
     drawerLabel: 'Example03', 
    } 
    }, 
}, 
{ 
    headerMode: 'none', 
    headerVisible: false, 
    navigationOptions: { 
    header: null 
    } 
}); 

希望這有助於。