React Native StackScreen如何统一设置全局头部样式？

你可以通过以下两种方式实现只配置一次样式就应用到所有Stack.Screen：

方法一：利用Stack.Navigator的screenOptions全局配置 #

Stack.Navigator提供了screenOptions属性，在这里设置的头部样式会被所有子Stack.Screen继承，每个页面只需要单独设置标题即可：

const MainNavigator = () => { 
    return (
        <NavigationContainer>
            <Stack.Navigator 
                initialRouteName="MainScreen"
                // 全局统一配置头部样式
                screenOptions={{
                    headerStyle: {
                        backgroundColor: '#0074C4',
                    },
                    headerTitleStyle: {
                        color: 'white',
                        fontSize: 24
                    },
                    headerLeft: null,
                    headerTitleAlign: 'center',
                }}
            >
                <Stack.Screen
                    name="MagicScreen"
                    component={MagicScreen}
                    options={{ title: 'Magic' }}
                />

                <Stack.Screen
                    name="FightingStyleScreen"
                    component={FightingStyleScreen}
                    options={{ title: 'Fighting Style' }}
                />

                <Stack.Screen
                    name="WeaponScreen"
                    component={WeaponScreen}
                    options={{ title: 'Weapons' }}
                 />
            </Stack.Navigator>
        </NavigationContainer>
    )
};

方法二：提取公共配置对象 #

如果需要给个别页面单独修改样式，可以先定义一个公共的头部配置对象，再通过展开运算符合并到每个页面的options中：

// 定义公共头部配置
const commonHeaderOptions = {
    headerStyle: {
        backgroundColor: '#0074C4',
    },
    headerTitleStyle: {
        color: 'white',
        fontSize: 24
    },
    headerLeft: null,
    headerTitleAlign: 'center',
};

const MainNavigator = () => { 
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="MainScreen">
                <Stack.Screen
                    name="MagicScreen"
                    component={MagicScreen}
                    options={{ ...commonHeaderOptions, title: 'Magic' }}
                />

                <Stack.Screen
                    name="FightingStyleScreen"
                    component={FightingStyleScreen}
                    options={{ ...commonHeaderOptions, title: 'Fighting Style' }}
                />

                <Stack.Screen
                    name="WeaponScreen"
                    component={WeaponScreen}
                    options={{ ...commonHeaderOptions, title: 'Weapons' }}
                 />
            </Stack.Navigator>
        </NavigationContainer>
    )
};

两种方法的区别：

• 方法一适合完全统一的全局样式配置，无需额外代码重复；
• 方法二更灵活，当某个页面需要修改部分头部样式时，只需要在该页面的options中覆盖对应的属性即可。

内容的提问来源于stack exchange，提问作者stay4ever