首页 文章

抽屉没有覆盖反应导航中的 Headers

提问于
浏览 次
4

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

  • react-navigation does not cover the header and statusbar ，我想实现像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);
  • Other problem is how should I add 2 drawers in my app at the same screen
reactjs react-native navigation-drawer react-navigation

5 回答

  • 0

    DrawerNavigator中有一个issue for Header .

    但你可以使用 StackNavigator inside DrawerNavigator 修复

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

    然后将 headerMode: 'none' 设置为 root StackNavigator

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

    这里，AppNavigator是根StackNavigator，routesConfig有DrawerNavigator和其他屏幕 .

    回复于
  • 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',
});
    回复于
  • 0
    回复于
  • 2

    据我所知，你必须做两件事：1 . 将抽屉控件放在导航堆栈的顶部 . 2.设置StatusBar的 translucent 属性

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

    如果它确实有效，请告诉我 .

    回复于
  • 0

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

    希望这可以帮助 .

    回复于

相关问题