Заголовок экранной навигации не будет отображаться в сложной навигации на ящике ... React Navigation V2

Michal спросил: 13 июня 2018 в 07:46 в: javascript

Поэтому по какой-то причине я не могу получить заголовки заголовков для экранов, вложенных в мой Drawer Navigator. Я исследовал эту тему довольно сильно и до сих пор не нашел решения.

Некоторые сайты заявили, что функции navigationOptions должны быть вызваны как функция = > Пробовал и не работал.

Некоторые сказали, что, поскольку мой Drawer Navigator вложен в Stack Nav, мои индивидуальные экраны для Drawer должны быть их собственными отдельными Stacks .... но когда я сделал это, это только создал то, что казалось маленьким под барной панелью с заголовком внутри, плавало влево.

Ive попытался объявить навигационные функции в навигаторах и статически через каждый экран, но ничего не работает, и у меня нет подскажите, почему это так сложно.

Я использовал старый React Navigation V1, и это никогда не было проблемой. Если у кого-то есть какие-либо решения или предложения, это было бы очень благодарно.

import React, { Component } from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';import {View,Text,StyleSheet,Platform,TouchableOpacity,Image,StatusBar} from 'react-native';import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import CharityScreen from '../screens/CharityScreen';
import RunScreen from '../screens/RunScreen';const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  },
  Charity: {
    screen: CharityScreen
  },
  Run: {
    screen: RunScreen
  },
});const StackNav = createStackNavigator(
  { Login: LoginScreen,
    DrawerNav: DrawerNavigator
  },
  {
   navigationOptions: {
    headerStyle: {
      backgroundColor: '#2b3991',
    },
    headerTintColor: '#fff',
    },
  },
);export default StackNav;

И вот мой индивидуальный экран с объявлением navigationOptions:

import React, { Component} from 'react';
import { View, Text } from 'react-native';
import { Container, Content, Card, CardItem, Header, Left, Body, Button, Icon, Title, H1 } from 'native-base';class HomeScreen extends React.Component {
  static navigationOptions = {
    headerMode: 'screen',
    title: 'Home',
    headerTitle: 'Home'
  };
  render() {
    return (
       <View style={{ flex: 1 , flexDirection: 'column', justifyContent: 'center' }}>
            <Card>
              <CardItem header style={{ flex: 1, justifyContent: 'center'}} >
                <H1 style={{ justifyContent: 'center'}} >Charity</H1>
              </CardItem>
              <CardItem>
                <Body>
                  <Icon name="images" style={{ fontSize: 50, borderWidth: 5 , borderStyle: 'dashed', borderRadius: 10, padding: 20}} />
                </Body>
              </CardItem>
            </Card>
            <Card style={{ flex: 1, backgroundColor: 'white', borderWidth: 2 }}></Card>
            <Card style={{ flex: 1, backgroundColor: 'white', borderWidth: 2 }}></Card>
        </View>
    );
  }
}export default HomeScreen;

Вот изображение моего приложения, когда я создал отдельные Stack Navs для каждого экрана в моем вложенном ящике Nav. Код, который я опубликовал выше, не создает этого изображения ..... но просто хотел добавить его, чтобы показать, что произошло, когда я это пробовал ... потому что это меня тоже смущает. Ядро Rendered App


1 ответ

Aung Myat Hein ответил: 13 июня 2018 в 04:47

Параметры навигации могут быть настроены только для его прямого родителя в версии 2.

  • Создайте отдельный стек для каждого экрана.
  • И затем вы можете настроить параметры навигации для createStackNavigator на соответствующем экране.

Я создал ссылку expo для вас.

Michal ответил: 14 июня 2018 в 02:13
Потрясающие! Спасибо. Я установил свой стек, как это из-за экрана входа в систему. Но я только что узнал о Swtich Navigator и реализовал это вместо этого, и теперь все работает как шарм. Но что именно вы имеете в виду, параметры навигации могут быть настроены только в его прямом родителе? Можете ли вы привести пример?

Дополнительное видео по вопросу: Заголовок экранной навигации не будет отображаться в сложной навигации на ящике ... React Navigation V2

#4 React Navigation 2.0 | Customize Drawer Navigator| React Native

Combining Navigators #2 | React Navigation V3 | React Native Tutorial

#1 React Navigation 2.0 | Stack Navigator | React Native