React Native iOS应用如何为Navigator添加全局深色模式切换功能

核心问题排查与修复步骤 #

你遇到的切换无反应问题主要由3个原因导致，按优先级修复即可：

1. 修复Switch组件的触发事件

React Native原生Switch组件的切换回调属性是onValueChange，你当前代码写的onChange不会触发回调，首先修改Settings.js里的Switch代码：

<Switch
 trackColor={{ false: "#767577", true: "#ccc" }}
 thumbColor={dark ? "#fff" : "#f4f3f4"}
 // 把onChange改成onValueChange
 onValueChange={toggle} 
 value = {dark} 
/>

2. 确认theme-context.js实现正确

你没有贴Context的实现代码，参考以下标准写法确保状态能正确更新：

// theme/theme-context.js
import React, { createContext, useState } from 'react';

// 定义浅色主题
const lightTheme = {
  background: '#ffffff',
  text: '#000000',
  primary: '#0437F2',
  card: '#FFFFFF',
  // 你项目中用到的所有公共颜色都在这里统一定义
};

// 定义深色主题
const darkTheme = {
  background: '#121212',
  text: '#ffffff',
  primary: '#1e40af',
  card: '#1e1e1e',
  // 和浅色主题一一对应配置深色模式适配值
};

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  // 深色模式状态
  const [dark, setDark] = useState(false);
  // 当前生效的主题
  const theme = dark ? darkTheme : lightTheme;
  // 切换主题的方法
  const toggle = () => setDark(prevState => !prevState);

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

3. 所有页面样式改为动态绑定主题

你当前所有StyleSheet都是写死的静态颜色，就算主题切换了样式也不会变化，需要把静态样式改成接收主题参数的动态方法，以Settings.js为例：

// 把原来的静态StyleSheet改成函数，接收theme参数
const getStyles = (theme, dark) => StyleSheet.create({
  container:{
    flex:1,
    paddingTop:40,
    paddingLeft:20,
    paddingBottom: 60,
    // 背景色从theme取，不写死
    backgroundColor: theme.background
  },
  appsettingstext:{
    fontSize:17,
    // 文字颜色从theme取
    color: theme.primary,
    fontWeight:'bold'
  },
  box: {
    shadowColor: dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .4)',
    shadowOffset: { height: 1, width: 1 },
    shadowOpacity: 1,
    shadowRadius: 1,
    elevation: 2,
    height: 80,
    width:380,
    borderRadius: 5,
    marginVertical: 40,
    // 卡片背景从theme取
    backgroundColor: theme.card,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: 'row',
  },
  darkModeText: {
    fontWeight:'bold',
    color: theme.text
  }
});

// 在组件内部消费context生成动态样式
const Settings = props => {
 const { dark, theme, toggle } = useContext(ThemeContext);
 const styles = getStyles(theme, dark);
 // 剩余组件逻辑不变...
}

项目中其他所有页面（MainPage、DownloadPage等）都要按照这个逻辑修改，所有颜色值都从theme中获取，不要写死固定色值。

4. 适配React Navigation导航样式

你当前导航栏、抽屉的样式都是写死的，需要把主题透传给导航组件，实现动态切换：
首先修改App.js，把主题作为screenProps传给导航：

// App.js引入ThemeContext
import { ThemeProvider, ThemeContext } from './theme/theme-context';

export default class App extends React.Component {
 render() {
  return (   
   <Provider store={store}>
      <ThemeProvider>
        <ThemeContext.Consumer>
          {/* 把主题透传给导航的screenProps */}
          {({ theme, dark }) => <FR_Navigator screenProps={{ theme, dark }} />}
        </ThemeContext.Consumer>
      </ThemeProvider>
   </Provider>
  );
 }
}

然后修改所有页面的navigationOptions，从screenProps中取主题动态设置导航样式，以Settings.js为例：

Settings.navigationOptions = navData =>{
  // 从screenProps获取当前主题
  const { theme, dark } = navData.screenProps;
  return{
    headerTitle: 'Settings',
    headerTitleStyle:{
       color: '#fff',
    },
    headerTitleAlign:"left",
    headerStyle: {
      // 导航栏背景色动态适配
      backgroundColor: theme.primary,
    },
    // 剩余导航配置不变...
  }
};

抽屉组件（DrawerHeader、DrawerItems）的样式也按照同样逻辑修改，所有颜色从theme或screenProps中获取即可。

完成以上修改后，深色模式开关就可以全局生效了。

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