【发布时间】：2018-12-16 01:06:59
【问题描述】：
因此，由于某种原因，我似乎无法为嵌套在抽屉导航器中的屏幕显示任何标题。我已经对这个主题进行了大量研究，但仍然没有找到解决方案。
有些网站说navigationOptions需要作为函数调用=>试过了，没用。
有人说，因为我的 Drawer Navigator 嵌套在 Stack Nav 中，所以我的 Drawer 单独屏幕应该是他们自己单独的 Stacks.... 但是当我这样做时，它只在导航栏下方创建了一个看起来很小的东西，里面有标题，浮动到左边。
我尝试在导航器中声明 navigationOptions 并通过每个屏幕静态声明，但似乎没有任何效果，我不知道为什么这如此困难。
我使用过旧的 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;
这是我为嵌套抽屉导航中的每个屏幕创建单独的堆栈导航时的应用图像。我在上面发布的代码不会产生这个图像......但只是想添加它以显示我尝试这个时发生的事情......因为这也让我感到困惑。 Image of Rendered App
【问题讨论】：
-
你的意思是“不产生这个图像”？
-
当我将抽屉导航中的每个屏幕都设置为堆栈导航器时，就会生成该图像。上面的代码生成一个典型的导航标题，但没有标题
标签： javascript reactjs react-native react-navigation