javascript-屏幕导航标题不会显示在堆叠的抽屉导航中…React Navigation V2

2019-11-08 18:44:16 阅读：241 来源： 互联网

标签：react-navigation reactjs react-native javascript

因此由于某种原因,我似乎无法使任何标题出现在“抽屉导航器”中嵌套的屏幕上.我已经对该主题进行了大量研究,但仍未找到解决方案.

一些站点已经说过,navigationOptions需要作为一个函数=>来调用.尝试并没有工作.

有人说过,因为我的抽屉导航器嵌套在Stack Nav中,所以我的Drawer的各个屏幕应该是它们自己的Stacks.
但是,当我这样做时,它只会在导航栏下方创建一个似乎很小的标题,标题在里面,然后浮动到左侧.

香港专业教育学院试图在导航器中声明并在每个屏幕上静态地声明navigationOptions,但似乎没有任何工作,我不知道为什么这是如此困难.

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;

这是我为嵌套Draw Nav中的每个屏幕创建单独的Stack Navs时我的应用程序的图像.我上面发布的代码不会产生此图像…..但只是想添加它以显示我尝试此操作时发生的事情….因为这也会使我感到困惑.
Image of Rendered App

解决方法:

导航选项只能在版本2中配置为其直接父级.

>为每个屏幕创建单独的堆栈.
>然后,您可以在相应屏幕上配置createStackNavigator的导航选项.

我为您创建了expo link.

标签：react-navigation,reactjs,react-native,javascript
来源： https://codeday.me/bug/20191108/2010055.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-屏幕导航标题不会显示在堆叠的抽屉导航中…React Navigation V2