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

2022-12-12 19:09:07

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

一些站点已经说过,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.

码农公寓

相关文章