React Navigation でアプリのページ遷移の管理を行っているのですが、ヘッダーのデザインを変更したいという要望があったのでその対処方法についてです。
ちなみに、思ったよりも簡単でした！
参考にした公式ページはこちら。
Configuring the header bar | React Navigation
https://reactnavigation.org/docs/headers/
実装方法ですが、<Stack.Navigator> の screenOptions で headerStyle を設定するだけです！
サンプルコードは下記のとおりです。
1 2 3 4 5 6 7 8 9 | import { StyleSheet } from 'react-native';const styles = StyleSheet.create({ header: { borderBottomWidth: 3, borderBottomColor: 'blue', },}); |
1 2 3 4 5 6 | <Stack.Navigator initialRouteName='top' screenOptions={{ headerStyle: styles.header }}> <Stack.Screen name="top" component={TopPage} options={{ title: 'トップ' }} /> ......</Stack.Navigator> |
上記のように設定したところ、ヘッダーの下部に高さ 3 の青い線が表示されました！
今回はそんなに複雑な処理をしていないので分かりませんが、他にも影を消したり、背景色を変更したりなど、StyleSheet で使えるものは大概適用されそうでした。
以上、React Native でナビゲーションバーのデザインを変更する方法でした。
ご参考になれば幸いです。
