こんにちは!!
今回はRaect NativeのReact Navigationでヘッダーに画像を設定する方法について、お伝えしたいと思います。
この方法はReact Navigation
の公式ドキュメントには書いてなかったので、ちょっとハマりました(笑)
もし、他にもっと良い方法があれば、ご連絡いただけると嬉しいです。
以下の環境で実装しました。
環境
・Expo SDK 37
・react-native-navigation: 6.3.7
ヘッダーに画像を設定するにはnaviagtion.setOptionsを使う
ご存知かと思いますが、React Natvigationでは各Screenコンポーネントではpropsとしてnavigation
が渡されます。
そのnavigation
のsetOptions
関数を使うことで、ヘッダーの設定を変更できます。
今回の場合、headerTitle
を設定することで、ヘッダーに画像を設定することができました。
以下は関数コンポーネントでの書き方は例です。
// 例
export default function ChatRoom({navigation}) {
navigation.setOptions({
headerTitle: () => {
return (
<View>
<Image
style={styles.image}
source={{uri: imagePath}}
/>
</View>
);
},
});
return (
<View>
<Text>Home Screen!!</Text>
</View>
);
}
以上、お疲れ様でした!!