屏幕导航页眉不会显示在堆叠的抽屉导航中.... React Navigation V2

Question

屏幕导航页眉不会显示在堆叠的抽屉导航中.... React Navigation V2

Mic*_*hal 4 javascript reactjs react-native react-navigation

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

一些网站已经说过，navigationOptions需要作为一个函数调用=>尝试过并且没有起作用。

有人说过，因为我的Drawing Navigator嵌套在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;

Run Code Online (Sandbox Code Playgroud)

这是我的个人屏幕，其中声明了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;

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Aun*_*ein 6

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

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

我已经为您创建了博览会链接。

归档时间：	7 年，3 月前
查看次数：	1712 次
最近记录：	7 年，3 月前