Fatal编程技术网
  • javascript/
  • Javascript 屏幕导航标题不会显示在堆叠抽屉导航中…反应导航V2

Javascript 屏幕导航标题不会显示在堆叠抽屉导航中…反应导航V2

javascript reactjs react-native

Javascript 屏幕导航标题不会显示在堆叠抽屉导航中…反应导航V2,javascript,reactjs,react-native,react-navigation,Javascript,Reactjs,React Native,React Navigation,因此，出于某种原因，我似乎无法为嵌套在抽屉导航器中的屏幕显示任何标题。我对这个话题进行了大量的研究，但仍然没有找到解决方案 一些网站说navigationOptions需要作为函数调用=>尝试过，但没有成功 有人说，因为我的抽屉导航器嵌套在堆栈导航中，所以抽屉的各个屏幕应该是它们自己的各个堆栈。。。。 但当我这么做的时候，它只在导航栏下方创建了一个小的标题在里面，浮动到左边 我试着在导航器中声明导航选项，并通过每个屏幕静态地声明，但似乎什么都不起作用，我也不知道为什么这么难 我用的是旧的Reac

因此，出于某种原因，我似乎无法为嵌套在抽屉导航器中的屏幕显示任何标题。我对这个话题进行了大量的研究，但仍然没有找到解决方案

一些网站说navigationOptions需要作为函数调用=>尝试过，但没有成功

有人说，因为我的抽屉导航器嵌套在堆栈导航中，所以抽屉的各个屏幕应该是它们自己的各个堆栈。。。。 但当我这么做的时候，它只在导航栏下方创建了一个小的标题在里面，浮动到左边

我试着在导航器中声明导航选项，并通过每个屏幕静态地声明，但似乎什么都不起作用，我也不知道为什么这么难

我用的是旧的React导航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;
这是我的个人屏幕，其中声明了导航选项：

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;

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
从“本机基础”导入{容器、内容、卡片、卡片、标题、标题、左侧、正文、按钮、图标、标题、H1}；
类主屏幕扩展了React.Component{
静态导航选项={
headerMode:'屏幕'，
标题:"家",，
标题：“家”
};
render（）{
返回(
慈善事业
);
}
}
导出默认主屏幕；
这是我在嵌套抽屉导航中为每个屏幕创建单独堆栈导航时的应用程序图像。我上面发布的代码并没有生成这个图像……但我只是想添加它来显示我尝试这个时发生了什么……因为这也让我感到困惑。

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

  • 为每个屏幕创建单独的堆栈
  • 然后，您可以在相应屏幕上配置createStackNavigator的导航选项
我已经为您创建了。

您的意思是“不生成此图像”？该图像是在我将抽屉导航中的每个屏幕设置为堆栈导航器时生成的。上面的代码生成了一个典型的导航标题，但没有标题！非常感谢。由于登录屏幕，我已经这样设置了我的堆栈。但我刚刚发现了Swtich Navigator，并实现了它，现在一切都像一个魅力。但是，什么是导航选项只能在其直接父级中配置？你能举个例子吗？