如何基于Props设置React Navigation全局navigationOptions？适配主题切换

嘿，这个需求我之前帮好几个开发者搞定过，把自定义明暗主题和React Navigation的全局配置结合起来其实挺顺畅的，我给你一步步拆解实现思路：

首先得确保你的Theme Context已经能正常提供主题数据和切换方法，这里给你一个极简的实现示例（你可以根据自己的颜色需求调整）：

// ThemeContext.js
import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 定义明暗主题的色值配置
  const theme = isDarkMode 
    ? {
        primary: '#2d3748',   // 深色模式下的导航栏背景色
        text: '#f7fafc',      // 深色模式下的文字/图标颜色
        background: '#1a202c' // 页面背景色
      } 
    : {
        primary: '#4299e1',   // 浅色模式下的导航栏背景色
        text: '#2d3748',      // 浅色模式下的文字/图标颜色
        background: '#ffffff' // 页面背景色
      };

  const toggleTheme = () => setIsDarkMode(prev => !prev);

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定义钩子方便全局调用
export const useTheme = () => useContext(ThemeContext);

接下来在你的导航容器组件中，通过useTheme钩子获取当前主题，然后把主题色注入到全局的screenOptions中——这样所有页面的导航栏都会自动跟随主题变化：

// AppNavigator.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { useTheme } from './ThemeContext';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {
  const { theme } = useTheme();

  // 全局导航配置，完全依赖当前主题
  const globalNavOptions = {
    headerStyle: {
      backgroundColor: theme.primary,
    },
    headerTintColor: theme.text, // 导航栏返回图标、标题的颜色
    headerTitleStyle: {
      color: theme.text,
      fontWeight: '600'
    },
    // 如果是底部Tab导航，类似的：
    // tabBarStyle: { backgroundColor: theme.primary },
    // tabBarActiveTintColor: theme.text
  };

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={globalNavOptions} // 注入全局配置
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

最后在根组件里，把ThemeProvider套在导航容器外面，确保所有导航相关组件都能拿到主题数据：

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import AppNavigator from './AppNavigator';

const App = () => {
  return (
    <ThemeProvider>
      <AppNavigator />
    </ThemeProvider>
  );
};

export default App;

如果某个页面需要单独定制导航样式，同时还要跟随主题变化，别用静态的navigationOptions（它没法直接访问Context），推荐用useLayoutEffect在组件内部动态设置：

// HomeScreen.js
import React, { useLayoutEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { useTheme } from '../ThemeContext';

const HomeScreen = ({ navigation }) => {
  const { theme, toggleTheme } = useTheme();

  // 动态设置当前页面的导航选项
  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: '我的首页',
      // 可以继承全局样式，也可以单独覆盖
      headerStyle: {
        backgroundColor: theme.primary,
        borderBottomWidth: 0
      }
    });
  }, [navigation, theme]); // 依赖theme，主题切换时自动更新

  return (
    <View style={{ flex:1, backgroundColor: theme.background, justifyContent:'center', alignItems:'center' }}>
      <Text style={{ color: theme.text, fontSize:20 }}>首页内容</Text>
      <Button title="切换明暗主题" onPress={toggleTheme} />
      <Button title="去个人中心" onPress={() => navigation.navigate('Profile')} />
    </View>
  );
};

export default HomeScreen;

• 确保ThemeProvider包裹范围足够大：必须覆盖整个导航容器，不然导航组件拿不到主题数据。
• 依赖theme更新导航配置：因为我们把theme作为useLayoutEffect和导航配置的依赖项，所以每次切换主题时，所有导航样式都会自动重新渲染。
• 避免静态navigationOptions：静态配置无法响应Context的动态变化，用useLayoutEffect是更灵活的方案。

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