web-dev-qa-db-ja.com

React Native？でcreateStackNavigatorのヘッダーを非表示にする方法

すでにコード内にツールバーのスタイルを設定しているため、ヘッダーを非表示にしたい：

import {createStackNavigator}
from 'react-navigation'
const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

コードに何を追加する必要がありますか？

react-nativestack-navigator
8
Just Ahead

このコードのようにコードを更新します

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            header: null,
        },
    },
})

すべての画面のヘッダーが必要ない場合は、

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage,
    },
},
{
    navigationOptions: {
        header: null,
    },
})
33
Aravind S

createStackNavigator内のすべてのビューのヘッダーを無効にするには、headerModeオプションを使用できます。

const AppStackNavigator = createStackNavigator({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
},
{
  headerMode: 'none',
})

リファレンス： StackNavigatorConfig-createStackNavigator-React Navigation

18
asukiaaa

試すことができます：

static navigationOptions = {
    header: null
}

画面コンポーネント内。

2
Stiven Castillo

次のコードを使用してヘッダーを非表示にしました。

   {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack 

    }
1
Kishan Oza

特定の画面またはグローバルにヘッダーを非表示にするには、次のようにします

const StackNavigator = createStackNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            header: null // Will hide header for HomePage
        }
    }
}, {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack navigator,
        headerLeft: <HeaderLeft /> // Component to be displayed in left side of header (Generally it can be Hamburger)
        headerRight: <HeaderRight /> // Component to be displayed in right side of header
    }
})

また、画面固有の設定がグローバル設定を上書きすることに注意してください。お役に立てれば。

1
Mahesh Bhuva