安装scss_React Native + Typescript + Scss开发配置过程

React Native + Typescript + Scss开发配置过程

开发工具

• Visual Studio Code
• React Native Tools扩展

Typescript支持

入口文件index.js必须保持原文件名，不可改名。

初始化typescript编译配置

yarn tsc --init --pretty --jsx react-native

0.57+的Typescript

Typescript is supported by default on React Native 0.57+

0.57之前的typescript支持

安装依赖

yarn add --dev typescript react-native-typescript-transformer @types/react @types/react-native @types/jest @types/react-test-renderer

初始化tsc配置

yarn tsc --init --pretty --jsx react

创建rn-cli.config.js配置文件，配置代码

module.exports = {
    getTransformModulePath() {
      return require.resolve('react-native-typescript-transformer');
    },
    getSourceExts() {
      return ['ts', 'tsx'];
    },
  };

0.57+的scss支持

增加scss支持能独立分离出scss相关的拼写检查、智能提示；但由于react Native中是像素布局是没有单位的，而在scss中必须携带单位，如果不带单位则会导致scss无法编译。scss生成的jscss语义不变，但内容相对啰嗦。另外：书写scss要特别注意。

yarn add --dev react-native-sass-transformer node-sass

rn-cli.config.js 配置代码

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

单元测试

yarn --dev add typescript ts-jest

在package.json中增加jest配置

"jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "ts",
      "tsx"
    ],
    "testMatch": [
      "**/__tests__/**/*.(js|ts)?(x)",
      "**/?(*.)+(spec|test).(js|ts)?(x)"
    ],
    "transform": {
      "^.+.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      ".(ts|tsx)$": "ts-jest"
    }
  }

或者使用ts-jest外部配置

yarn ts-jest config:init

使用react-web可将react-native无缝转为wap

试水之后发现:"使用SCSS开发React-Native是一个极其糟糕的主意。"