React Native中出现TypeError: Cannot read property 'initialPreferences' of undefined错误的技术求助

我之前在做React Native外观适配时也碰到过一模一样的错误，这个问题大概率和react-native-appearance的版本兼容、导入方式或者初始化时机有关，下面给你几个可行的解决方案：

1. 检查React Native版本，替换正确的导入路径 #

从React Native 0.62版本开始，Appearance模块已经被整合到RN核心库中了，不需要再单独安装react-native-appearance包。如果你的RN版本≥0.62，直接修改导入语句：

import { Appearance } from 'react-native';

如果还在使用RN 0.61及以下版本，需要安装社区维护的包：

# npm
npm install @react-native-community/appearance
# yarn
yarn add @react-native-community/appearance

导入时改为：

import { Appearance } from '@react-native-community/appearance';

iOS用户记得安装完后进入ios目录执行pod install。

2. 避免在组件外部过早调用Appearance方法 #

你的代码里直接在导出的普通函数中调用Appearance.getColorScheme()，这时候RN的原生模块可能还没完成初始化，导致Appearance对象未定义。推荐改用RN官方提供的useColorScheme钩子，并且在组件内部或自定义钩子中使用：

import { useColorScheme } from 'react-native';

// 封装成自定义钩子
export const useModedColor = (lightModeColor, darkModeColor) => {
  const colorScheme = useColorScheme();
  return colorScheme === 'dark' ? darkModeColor : lightModeColor;
};

// 在组件中调用使用
import { Text } from 'react-native';

const MyComponent = () => {
  const textColor = useModedColor('#000000', '#ffffff');
  return <Text style={{ color: textColor }}>示例文本</Text>;
};

3. 排查版本冲突问题 #

如果同时安装了单独的react-native-appearance包和使用RN核心的Appearance，很容易出现冲突。可以先卸载单独的包：

npm uninstall react-native-appearance
# 或者
yarn remove react-native-appearance

然后清理缓存避免残留问题：

# 清除npm缓存
npm cache clean --force
# 清除Metro缓存
npx react-native start --reset-cache

按照上面的步骤排查，应该就能解决这个错误了。

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