reactjs – 使用React Native中的React Navigation隐藏StackNavi

发布时间：2020-12-15 09:33:08 所属栏目：百科来源：网络整理

导读：我有以下内容： 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.nav

我有以下内容：

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上,现在有一个标题如下：

enter image description here

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!