当前位置 : 主页 > 网页制作 > React >

reactjs – 使用React Native中的React Navigation隐藏StackNavigator上的标头

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有以下内容: 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.
我有以下内容:

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'
  }
});

在HomeScreen上,现在有一个标题如下:

如何隐藏此标题?我只想要一个空白的屏幕,或者在这种情况下,只需要< Text> Hello,Chat App!< / Text>显示?

如果你想隐藏所有屏幕标题然后使用@pitty或@burhan答案(尽管两者都有相同的答案)但是为了专门删除一个屏幕标题然后只使用header:null作为 React Navigation文档中提到的屏幕道具,所以使用它像这样:

Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      header: null //this will hide the header
    },
},
网友评论