React Navigationのバージョン : 6.x
今回は Bottom Tab でやっていきます。
React Navigationのヘッダーをカスタマイズする方法として、
- 全てのページをカスタマイズ
- 個別にカスタマイズ
の2通りを紹介します。
ちなみに設定ができるものについて、詳しくはドキュメントを見てみてください。
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',
},
});


コメント