navigationのsetOptionで設定できるものは？

2024-11-21

1. ヘッダー関連の設定

ヘッダーのデザインや動作を変更できます。

プロパティ	説明
`title`	ヘッダーに表示する画面タイトル。
`headerTitle`	カスタムコンポーネントまたは関数でタイトルを表示。
`headerStyle`	ヘッダー全体のスタイルを設定（背景色など）。
`headerTitleStyle`	ヘッダーのタイトルのスタイル（フォントや色など）。
`headerTintColor`	戻るボタンやアイコンの色を設定。
`headerShown`	ヘッダーを表示するかどうか（`true` / `false`）。
`headerTransparent`	ヘッダーを透明にする（背景画像の上に配置する場合など）。
`headerLeft`	ヘッダー左側に表示するカスタムコンポーネントを指定。
`headerRight`	ヘッダー右側に表示するカスタムコンポーネントを指定。
`headerBackTitle`	戻るボタンのテキストをカスタマイズ（デフォルトは前の画面のタイトル）。
`headerBackVisible`	戻るボタンを表示するかどうかを指定（`true` / `false`）。

2. ジェスチャーやトランジションの設定

画面遷移や戻るジェスチャーに関する設定。

プロパティ	説明
`gestureEnabled`	ジェスチャーで画面を閉じられるか（スワイプなど）。
`gestureDirection`	ジェスチャーの方向（`horizontal` / `vertical` など）。
`animationEnabled`	画面遷移時のアニメーションを有効にするか（`true` / `false`）。
`animationTypeForReplace`	画面をリプレースする際のアニメーション（`push` / `pop`）。

3. タブナビゲーションやドロワーナビゲーション用の設定

タブやドロワーで利用する場合のオプション。

プロパティ	説明
`tabBarVisible`	タブバーを表示するかどうか（`true` / `false`）。
`tabBarStyle`	タブバーのスタイル（背景色や高さなど）。
`tabBarIcon`	タブバーのアイコンをカスタマイズする関数またはコンポーネント。
`drawerLabel`	ドロワーに表示されるラベル。
`drawerIcon`	ドロワーに表示されるアイコン。

4. ステータスバーの設定

ステータスバー（画面最上部のバッテリーや時刻が表示されるエリア）に関する設定。

プロパティ	説明
`statusBarStyle`	ステータスバーのスタイル（`dark-content` / `light-content`）。
`statusBarHidden`	ステータスバーを非表示にするか（`true` / `false`）。
`statusBarBackgroundColor`	ステータスバーの背景色（Androidのみ）。

5. その他のカスタマイズ

その他、特定のシナリオで役立つ設定。

プロパティ	説明
`cardStyle`	画面全体のスタイル（背景色など）。
`cardOverlayEnabled`	画面遷移時のオーバーレイ（半透明の背景）を有効にする。
`presentation`	モーダルのスタイルを指定（`modal` / `card` など）。

setOptionsの実装例

動的なタイトルの設定

import React, { useLayoutEffect } from &#39;react&#39;;
import { View, Text } from &#39;react-native&#39;;

const DetailScreen = ({ navigation, route }) =&gt; {
  const { itemId } = route.params;

  useLayoutEffect(() =&gt; {
    navigation.setOptions({
      title: `Item ${itemId}`, // 動的にタイトルを変更
      headerTintColor: &#39;white&#39;,
      headerStyle: { backgroundColor: &#39;tomato&#39; },
    });
  }, [navigation, itemId]);

  return (
    &lt;View&gt;
      &lt;Text&gt;Detail Screen for Item {itemId}&lt;/Text&gt;
    &lt;/View&gt;
  );
};

export default DetailScreen;

import React, { useLayoutEffect } from 'react';

import { View, Text } from 'react-native';

const DetailScreen = ({ navigation, route }) => {

const { itemId } = route.params;

useLayoutEffect(() => {

navigation.setOptions({

title: `Item ${itemId}`, // 動的にタイトルを変更

headerTintColor: 'white',

headerStyle: { backgroundColor: 'tomato' },

});

}, [navigation, itemId]);

return (

<View>

<Text>Detail Screen for Item {itemId}</Text>

</View>

);

};

export default DetailScreen;

カスタムヘッダーの設定

import React from &#39;react&#39;;
import { Button } from &#39;react-native&#39;;

const HomeScreen = ({ navigation }) =&gt; {
  React.useLayoutEffect(() =&gt; {
    navigation.setOptions({
      headerRight: () =&gt; (
        &lt;Button
          onPress={() =&gt; alert(&#39;This is a button!&#39;)}
          title=&quot;Info&quot;
          color=&quot;#000&quot;
        /&gt;
      ),
    });
  }, [navigation]);

  return null;
};

export default HomeScreen;

import React from 'react';

import { Button } from 'react-native';

const HomeScreen = ({ navigation }) => {

React.useLayoutEffect(() => {

navigation.setOptions({

headerRight: () => (

<Button

onPress={() => alert('This is a button!')}

title="Info"

color="#000"

});

}, [navigation]);

return null;

};

export default HomeScreen;

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

D-rin

navigationのsetOptionで設定できるものは？

1. ヘッダー関連の設定

2. ジェスチャーやトランジションの設定

3. タブナビゲーションやドロワーナビゲーション用の設定

4. ステータスバーの設定

5. その他のカスタマイズ

setOptionsの実装例

この記事を書いた人

コメント

コメントするコメントをキャンセル

navigationのsetOptionで設定できるものは？

1. ヘッダー関連の設定

2. ジェスチャーやトランジションの設定

3. タブナビゲーションやドロワーナビゲーション用の設定

4. ステータスバーの設定

5. その他のカスタマイズ

setOptionsの実装例

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル