React Native使用Platform模块触发Invariant Violation错误求助

1. 修复代码语法错误 #

你的代码存在致命语法问题：if (Platform.OS = "ios") 使用了赋值运算符=，而非严格相等比较符===，这会导致Platform.OS被强制赋值为"ios"，逻辑完全失效。修正后的简洁写法：

import { Platform } from "react-native";

import androidStyles from "./HomeScreen.android.scss";
import iosStyles from "./HomeScreen.ios.scss";

const osStyles = Platform.OS === "ios" ? iosStyles : androidStyles;

export default osStyles;

2. 解决Expo Go模块未注册错误 #

你遇到的Invariant Violation错误，核心原因是Expo Go默认不支持SCSS预处理器的原生集成。分开的styles.ios.js/styles.android.js能正常运行，但合并后动态导入SCSS触发了未注册的原生模块，可通过以下方式解决：

方式一：创建Expo开发构建 #

若要继续使用SCSS，需构建支持自定义原生模块的开发客户端：

• 安装依赖：

  npx expo install expo-dev-client
  

• 构建对应平台的开发客户端：

  # iOS
  npx expo run:ios
  # Android
  npx expo run:android
  

• 后续使用该开发客户端启动项目，替代Expo Go。

方式二：改用原生支持的样式方案 #

如果不想搭建开发构建，推荐直接使用React Native原生StyleSheet做平台适配，或采用CSS-in-JS方案（如styled-components、emotion），这类方案无需原生配置，Expo Go可直接运行。示例：

import { StyleSheet, Platform } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: Platform.OS === "ios" ? 20 : 16,
    backgroundColor: Platform.OS === "ios" ? "#fff" : "#f5f5f5"
  },
  title: {
    fontSize: Platform.OS === "ios" ? 24 : 22,
    fontWeight: "bold"
  }
});

export default styles;

方式三：用Babel插件转译SCSS #

通过Babel插件将SCSS转译为React Native支持的样式对象，无需依赖原生模块：

• 安装依赖：

  npm install --save-dev babel-plugin-react-native-scss-transformer node-sass
  

• 修改babel.config.js：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: ['react-native-scss-transformer']
    };
  };
  

• 配置完成后，SCSS文件会自动转译为普通样式对象，可在Expo Go中正常使用。

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