4

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

  1. react-navigation 不包括 header 和 statusbar，我想实现类似gmail的东西，但我最终得到了这样的结果

我使用以下代码块来达到这一点

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);
  1. 另一个问题是我应该如何在同一个屏幕上在我的应用程序中添加 2 个抽屉
4

5 回答 5

3

这是一个简化的示例：

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',
});
于 2017-03-31T07:49:33.703 回答
2

DrawerNavigator 中的 Header存在问题。

但是您可以通过在 DrawerNavigator 中使用StackNavigator来修复

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 和其他屏幕。

于 2017-03-29T09:37:28.703 回答
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
  }
});

希望这可以帮助。

于 2017-07-25T16:48:14.480 回答
0

这是您要解决的问题吗？

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

于 2017-03-29T01:23:49.440 回答
0

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

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

请让我知道它是否有效。

于 2017-03-29T03:14:48.443 回答