272

I'm trying to switch screens using both stack and tab navigator.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

In this case stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options like::

navigationOptions: { header: { visible: false } }

i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like:

ここに画像の説明を入力

4

31 に答える 31

660

バージョン 5 以降の更新

バージョン 5 以降ではheaderShown、screenOptions

使用例：

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

1 つの画面でヘッダーのみを非表示にする場合は、画面コンポーネントで screenOptions を設定することでこれを行うことができます。例を以下に示します。

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

バージョン 5 に関するブログも参照してください。

更新
バージョン 2.0.0-alpha.36 (2019-11-07) の時点で
、新しい navigationOption があります。headershown 

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

古い答え

これを使用して、スタック バーを非表示にします (これは 2 番目のパラメーターの値であることに注意してください)。

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

このメソッドを使用すると、すべての画面で非表示になります。

あなたの場合、次のようになります。

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);
于 2017-06-22T13:49:58.037 に答える
10

stackNavigator に新しい navigationOptions オブジェクトを追加します。

これを試して ：

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

それが役に立てば幸い。

于 2019-11-05T06:03:23.083 に答える
8

誰かがヘッダーを切り替える方法を探している場合、componentDidMount で次のように記述します。

  this.props.navigation.setParams({
      hideHeader: true,
  });

いつ

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

そして、イベントが仕事を終えたときのどこか：

this.props.navigation.setParams({
  hideHeader: false,
});
于 2018-03-17T23:02:44.187 に答える
5

私にとってnavigationOptionsはうまくいきませんでした。以下は私のために働いた。

<Stack.Screen name="Login" component={Login}
      options={{
               headerShown: false
              }}
     />
于 2020-11-29T20:23:24.490 に答える
4

反応ナビゲーション 5.xでは、のheaderModeprop をNavigatorto に設定することで、すべての画面のヘッダーを非表示にできますfalse。

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>
于 2020-02-22T16:53:47.133 に答える
0

使用している react-navigation ライブラリのバージョンはすべて異なるため、ソリューションに一致させることが重要です。私のような何らかの理由でまだ react-navigation v1.0.0 を使用している場合、これらは両方とも機能しました。

個々の画面でヘッダーを無効化/非表示にする場合:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

すべての画面を一度に無効化/非表示にするには、次を使用します。

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);
于 2020-05-11T06:02:52.567 に答える