React Navigationのヘッダーをカスタマイズする方法

React Navigationのバージョン : 6.x

今回は Bottom Tab でやっていきます。

React Navigationのヘッダーをカスタマイズする方法として、

全てのページをカスタマイズ
個別にカスタマイズ

の２通りを紹介します。

ちなみに設定ができるものについて、詳しくはドキュメントを見てみてください。

https://reactnavigation.org/docs/elements/#headerstyle

全てのページをカスタマイズ

すべてのページを一括でカスタマイズするには Navigator の screenOptions を使います。

例えばヘッダーの色をカスタマイズしたければ下のようにします。

<Tab.Navigator
screenOptions={{
  headerStyle: {
    backgroundColor: 'gold'
  }
}}
>
</Tab.Navigator>

実際にヘッダーをカスタマイズするコードを書いてみました。

import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function Tab1(){
  return (
    <View style={styles.container}>
      <Text>Tab1</Text>
    </View>
  )
}

function Tab2(){
  return (
    <View style={styles.container}>
      <Text>Tab2</Text>
    </View>
  )
}
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: 'gold'
        },
        headerTitleStyle: {
          fontStyle: 'italic',
          fontWeight: '900'
        }
      }}
      >
        <Tab.Screen name='tab1' component={Tab1} />
        <Tab.Screen name='tab2' component={Tab2} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

個別にカスタマイズ

各ページを個別にヘッダーをカスタマイズしたければ、 Navigator の screenOptions ではなく、
Screen の options を使用します。

<Tab.Screen 
options={{
    headerStyle: {
      backgroundColor: 'gold'
    }
 }}
name='tab1'
component={Tab1} 
/>

import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function Tab1(){
  return (
    <View style={styles.container}>
      <Text>Tab1</Text>
    </View>
  )
}

function Tab2(){
  return (
    <View style={styles.container}>
      <Text>Tab2</Text>
    </View>
  )
}
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen 
        options={{
            headerStyle: {
              backgroundColor: 'gold'
            },
            headerTitleStyle: {
              fontStyle: 'italic',
              fontWeight: '900'
            }
         }}
        name='tab1' component={Tab1} />
        <Tab.Screen name='tab2' component={Tab2} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});