我有以下内容:
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends React.Component {
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home'
},
},
Chat: {
screen: ChatScreen,
navigationOptions: {
title: 'Chat with Lucy'
}
},
});
export default class App extends React.Component {
render() {
return <SimpleApp />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
On HomeScreen
现在有一个标题,如下所示:
如何隐藏这个标题?我只想要一个空白屏幕,或者在这种情况下,只想要<Text>Hello, Chat App!</Text>
以显示?
如果您想隐藏所有屏幕标题,请使用 @pitty 或 @burhan 答案(尽管两者都有相同的答案),但要专门删除屏幕标题,则只需使用header: null
对于文档中提到的屏幕道具反应导航 https://reactnavigation.org/docs/navigators/stack#header所以像这样使用它:
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
header: null //this will hide the header
},
},
2020 年 2 月更新
With 新版本的堆栈 https://github.com/react-navigation/stack/releases/tag/v2.0.1现在你需要使用参数headerShown
哪个默认值是 true 例如
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
headerShown: false
},
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)