依旧是经典的起手总结，为了能够尽快上手React Native，这里使用一个简单的blank demo去做演练场。

项目准备

我们使用blank模板去构建一个expo项目：

1
npx create-expo-app@latest --template blank blank_demo

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
D:\blank_demo
├── .expo
├── .vscode
├── assets
├── node_modules
├── .gitignore
├── 1.txt
├── App.js              
├── app.json            # 项目配置文件
├── index.js            # 项目入口文件，在这里引用并注册app组件
├── package-lock.json
└── package.json

环境准备

ReactNative基础

ReactNative中的样式

React Hook

useReducer

网络接口/请求封装

环境变量

在react native里使用fetch做请求，在项目根目录创建一个.env文件，在里面添加上你的后台服务IP地址和端口:

1
EXPO_PUBLIC_API_URL=http://localhost:3000   # 服务地址

但是需要主义的是Expo里环境变量命名全都要大写，且需要以EXPO_PUBLIC开头。

urlcat

请求封装里有一个很好用的用于拼接URL路径的包：

1
npm i urlcat

用法，传入参数：

1
urlcat('http://localhost:3000', 'articles', { page: 1, limit: 10 })

可以自动转换成：

1
http://localhost:3000/articles?page=1&limit=10

Core Components

View

用FlatList实现性能控制

Switch

项目配置

用Prettier格式化代码

安装命令：

1
npm i -D prettier

然后在项目根目录里新建一个.prettierrc.json文件：

1
2
3
4
5
6
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "singleQuote": true,
  "printWidth": 100
}

然后再打开package.json文件，在scripts里增加format:

1
2
3
4
5
6
7
{
    "scripts": {
        // ...
        "web": "expo start --web",
        "format": "prettier --write \"**/*.{js,json,md,ts,jsx,tsx}\""
    },
}

定义src路径别名： @

在项目根目录下运行npx expo customize babel.config.js来创建babel配置文件。

在终端里运行npm i -D babel-plugin-module-resolver来安装插件，自定义目录别名。

然后在配置文件里加上插件相关的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./src'],
          alias: {
            '@': './src'
          },
        }
      ]
    ]
  };
};

修改完babel.config.js后，下一次重启服务时，需要清楚缓存，在npx expo start后加上--clear.

在编辑器里实现模块跳转

在项目根目录新建jsconfig.json：

1
2
3
4
5
6
7
8
9
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

保存后，再次在某个模块按住commnd/ctrl+鼠标左键，就可以跳转到对应模块文件了。

检查项目是否有报错

1
npx expo-doctor