ReactNativeのnavigationヘッダのタイトルを動的に設定する

2024-08-252024-08-27

結論

optionsでrouteを受け取る設定を行い、遷移元でタイトルを渡す

具体的対応

■イメージ

Stack.js

 // routeを引数として設定
options={({route}) =&gt; ({
　　　　　　　// route.paramsが何も渡されていないときはデフォルトのタイトルを設定する。
            headerTitle: route.params?.customTitle || &#39;defalt title&#39;,
　　　　　　　//　タイトル中央よせ
            headerTitleAlign: &#39;center&#39;,
          })}

// routeを引数として設定

options={({route}) => ({

　　　　　　　// route.paramsが何も渡されていないときはデフォルトのタイトルを設定する。

headerTitle: route.params?.customTitle || 'defalt title',

　　　　　　　//　タイトル中央よせ

headerTitleAlign: 'center',

})}

HomeScreen.js

// 送信元でボタンを押した際の動作
onPress={() =&gt; {
　　　　　　// 何も設定しなければ&#39;Question&#39;が表示される。{customTitle: &#39;問題&#39;}がrouteとして渡される
          navigation.navigate(&#39;Question&#39;, {customTitle: &#39;問題&#39;});
        }}

// 送信元でボタンを押した際の動作

onPress={() => {

　　　　　　// 何も設定しなければ'Question'が表示される。{customTitle: '問題'}がrouteとして渡される

navigation.navigate('Question', {customTitle: '問題'});

}}

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

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

D-rin

ReactNativeのnavigationヘッダのタイトルを動的に設定する

結論

具体的対応

この記事を書いた人

コメント

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

ReactNativeのnavigationヘッダのタイトルを動的に設定する

結論

具体的対応

この記事を書いた人

関連記事

コメント

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

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