从0到1搭建一个RN应用从开发测试到上架全流程

前言

本文从0到1搭建一个RN项目，包含开发、调试、上架全流程,以及记录开发中的问题解决方案，本文不涉及代码相关的问题;

工具

Expo go：用于开发预览调试使用需要梯子在google play下载app；
VSCode：代码编辑器；
梯子:自行准备梯子

项目构建

# 新建一个文件夹
RNobject
# 进入文件夹
cd RNobject
# 使用expo创建项目
npx create-expo-app@latest 项目名//例如：rnapp
# 项目构架成功进入工程目录
cd rnapp
# 启动项目
npm start

关于Expo go扫码预览本地启动项目的rn项目预览失败

问题描述：使用npm start启动成功后用Expo go APP扫码后会报错
如图所示：

解决方法 开启隧道模式：npx expo --tunnel在同一Wi-Fi网络下注释：启动比较慢

相关工具包推荐

路由：expo-router
状态管理：Redux DevTools
UI库：自行搜索（例如 React Native Paper）
请求方式：常用的 axios、fetch
其他: ......

expo go调试

• 使用expo go 摇晃手机即可调查控制台
• 点击open js debugger即可调查桌面控制台
• 进行调试

RN项目打包上线

• 注册 Expo 账号
• 下载eas：npm install -g eas-cli
• 登录账号：eas login:输入账号密码
• 项目生成配置项目：eas build:configure

# 项目中会生成eas.json
{
  "cli": {
    "version": ">= 16.1.0",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel":"development"//添加
    },
    "preview": {
      "distribution": "internal",
      "channel":"preview"//添加
    },
    "production": {
      "channel": "production"//添加
    }
  },
  "submit": {
    "production": {}
  }
}
# 生成的配置文件修改如上图

构建 Android 应用：

# 构建指令
eas build --platform android --profile preview
# 说明
构建完成后，可以通过 Expo 提供的链接下载生成的 APK 文件

构架成功如图所示

我们也可以在expo网站中查看：如图所示

• 把apk文件提交应用商店 把生成的apk上架到google play
• 补充说明（可选）：如何需要生成android代码目录：npx expo prebuild
• 热更新配置（可选）：

# 在app.json中配置如下
{
  "expo": {
    "updates": {
      "fallbackToCacheTimeout": 0,
      "url": "https://u.expo.dev/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  }
}

总结

以上就是从0到1搭建一个RN应用从开发测试到上架全流程，以及记录开发中的问题解决方案，以及相关工具包的推荐；