React Native搭配TypeScript进行跨平台开发

Author Avatar
labike 4月 26, 2021

搭建开发环境

使用npx react-native init reactNativeTs --template react-native-template-typescript创建模版

创建模版过程中可能遇见的问题: pod install失败. 具体报错:

fatal: unable to access 'https://github.com/google/glo... LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

个人经过尝试一般网络环境下可能下载失败, 开启代理也可能失败, 建议将网络改为Wifi后重新pod install.

多环境配置

使用react-native-config进行多环境配置比起之前process.env.NODE_ENV进行判断简单的多. 我们只需在项目根目录下新建.env即可进行配置.

API_URL = 'api.com'

或者.env.development还可以是.env.production.
由于该依赖包需要对原生android文件进行修改所以我们需要在android/app/build.gradle下添加
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

绝对路径配置

通常情况下我们的应用会由许多页面构建成, 这就意味着我们可能在不同的文件中导入需要的组件或者工具方法, 如果页面少我们可以使用../或者../../这种方式. 一旦应用复杂目录嵌套深前面这种方式将难以维护, 所以我们通过插件来配置查找路径. 首先我们安装babel-plugin-module-resolver

接着在babel.config.js中添加依赖并配置相关路径:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  + plugins: [
  +   [
  +     'module-resolver',
  +     {
  +       root: ['./src'],
  +       alias: {
  +         '@/utils': './src/utils',
  +         '@/pages': './src/pages',
  +         '@/models': './src/models',
  +         '@/navigator': './src/navigator',
  +         '@/config': './src/config',
  +         '@/assets': './src/assets',
  +         '@/compontns': './src/components'
  +       }
  +     }
  +   ]
  + ]
}

可以看到我需要的所有页面或方法都放在src下的不同目录中.
接下来修改tsconfig.json, 我们放开该文件中的baseUrl和paths, 修改如下:

"baseUrl": "./src",
"paths": {
  "@/assets/*": ["assets/*"],
  "@/components/*": ["components/*"],
  "@/config/*": ["config/*"],
  "@/models/*": ["models/*"],
  "@/navigator/*": ["navigator/*"],
  "@/pages/*": ["pages/*"],
  "@/utils/*": ["utils/*"]
}

至此React-Native-Ts开发模版搭建完成. 后面开发其他React Native项目时直接使用即可.
React-Native-Ts-Template

Powered by Hexo
Theme - Material