React Native纯干货总结

随着项目也渐渐到了尾声，之前的项目是mobile开发，采用的是React Native。为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴，也顺便自己做一下之前项目的总结。

文章比较长，可以选择自己感兴趣的章节了解下。

项目整体技术栈：

• React Native
• React Navigation
• Firebase
• Jotai（项目后期加入）
• Typescript
• Jest

1. 配置项目绝对路径

一般的项目都会有一个源代码目录src ，并且随着项目的膨胀，会出现越来越多的子目录，这时候如果不加控制的话，会出现一大堆类似这种../../.. 的相对路径，找文件也不是非常方便。

1.1 没有集成Typescript

You can simply create a package.json file inside the folder you want to import it. Yes, at a glance this probably seems a little weird, but with practice, you get used to it. It should have a single property with the folder name as its value. Let’s create our package.json file inside the components folder.

配置绝对路径需要做的事就是在你需要引入的文件中添加一个package.json

{
  "name": "components"
}

然后你就可以使用了

import MyComponent from "components/MyComponent";

1.2 集成了Typescript

如果项目集成了typescript，可能还需要做一些额外的操作，首先添加一个库：react-native-typescript-transformer。

yarn add --dev react-native-typescript-transformer

然后需要配置tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
    "paths": {
      "src/*": ["./*"],
    },
  },
  "exclude": [
    "node_modules",
  ],
}

然后在metro.config.js 中配置transformer.babelTransformerPath（我在项目中后来去掉了这个配置，发现也能使用