web-dev-qa-db-ja.com

React Navigation in React Nativeを使用してStackNavigatorのヘッダーを非表示にします

私は以下を持っています：

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>表示しますか？

reactjsreact-nativereact-navigation
6
user818700

すべての画面ヘッダーを非表示にする場合は、@ pittyまたは@burhanの回答を使用します（どちらも同じ回答です）が、特に画面ヘッダーを削除する場合は、-のドキュメントで説明されているように、画面の小道具にheader: nullを使用します。 React Navigation したがって、次のように使用します。

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

2020年2月に更新スタックの新しいリリース を使用して、param headerShownを使用する必要があります。デフォルトはtrueです。

Home: {
     screen: HomeScreen,
     navigationOptions: {
       title: 'Home',
       headerShown: false
     },
},
19
Shahzad Mirza

追加しようとする{ headerMode: 'none' }あなたのstactNavigator

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
}, {headerMode: 'none'});
7
Pitty
    const SimpleApp = StackNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          title: 'Home'
        },
      },
      Chat: {
        screen: ChatScreen,
        navigationOptions: {
          title: 'Chat with Lucy'
        }
      },
{ headerMode: 'none'}
);
5
Burhan Yılmaz

これを試して

Login: {
    screen: Login,
    navigationOptions: {
      title: '',
      headerTransparent:true,
    }
  },
1
Igor Thierry

StackNavigatorでは、headerMode: 'none'を使用してヘッダーを非表示にできると思います。そしてもう1つ、これを提案として使用できます。

反応ネイティブルーターフラックス

これは、react-nativeでのナビゲーションの場合により使いやすく、そこでhideNavBarプロップを使用してシーンにヘッダーを非表示にできます。これは同じ上であなたに役立つだろうドキュメントです Documentation

1
Harikrishnan S
const RootStack = createStackNavigator(
{
LandingPage: LandingPage,
HomeScreen: HomeScreen,
Login: Login
},
{
initialRouteName: 'LandingPage',
**header: null,
headerMode: 'none'**
}
);
const AppContainer = createAppContainer(RootStack);

ナビゲーションオプションは次のようになります。コードに太字の行を追加するだけです。

0
Khwaja Abdul Ahad