Ящик, не закрывающий заголовок в реагирующей навигации

Question

Привет, друзья! Я почесал голову с помощью реакции-навигации за последние 2 дня, я перепробовал много вещей (документация не кажется понятной для новичка), поэтому сейчас я сталкиваюсь с несколькими проблемами, которые кажутся мне немного сложными, и, следовательно, я Обратитесь за советом и помощью, чтобы продолжить. Далее следуют случаи / проблемы / сценарии, для которых я ищу помощь -

1. реакция-навигация не охватывает заголовок и строку состояния, я хотел добиться чего-то вроде 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);

2. Другая проблема заключается в том, как я должен добавить 2 ящика в моем приложении на одном экране

Answer 1

Вот упрощенный пример:

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 2

Существует проблема для заголовка в DrawerNavigator.

Но вы можете исправить это с помощью StackNavigator внутри 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, а routConfig имеет над DrawerNavigator и другими экранами.

Answer 3

Это проблема, которую вы пытаетесь решить?

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

Answer 4

Насколько я знаю, вы должны сделать 2 вещи: 1. Поместите управление ящиками в верхней части стека навигации. 2. Установить translucent свойство StatusBar

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

Пожалуйста, дайте мне знать, если это работает.

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

Надеюсь это поможет.