javascript-屏幕导航标题不会显示在堆叠的抽屉导航中…React Navigation V2
作者:互联网
因此由于某种原因,我似乎无法使任何标题出现在“抽屉导航器”中嵌套的屏幕上.我已经对该主题进行了大量研究,但仍未找到解决方案.
一些站点已经说过,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