Question

嗨朋友我在最近2天的反应导航中摸不着头脑，我尝试了很多东西（文档对于初学者来说似乎不太清楚），所以现在我面临的一些问题对我来说似乎并不复杂因此，我寻求建议和帮助继续进行。以下是我寻求帮助的案例/问题/情景 -

react-navigation未涵盖标题和状态栏，我希望达到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

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 2

这是一个简化的例子：

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 3

这是您尝试解决的问题吗？

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

Answer 4

据我所知，你必须做两件事： 1.将抽屉控制器放在导航堆栈的顶部。 2.设置StatusBar的半透明属性＆LT;状态条半透明 backgroundColor =“rgba（0,0,0,0.24）” 动画 /＆GT; {Platform.OS ==='android'＆amp;＆amp; Platform.Version＆gt; = 20？＆LT;查看风格= {{ 身高：24， backgroundColor：“＃512DA8”， }} /＆GT; ：空值 } 如果它确实有效，请告诉我。

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

希望这有帮助。

抽屉不在反应导航中覆盖标题

5 个答案: