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

前言

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

工具

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

项目构建

bash 复制代码

# 新建一个文件夹
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 go调试

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

RN项目打包上线

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

csharp 复制代码

# 项目中会生成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 应用：

bash 复制代码

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

构架成功如图所示

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

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

bash 复制代码

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

总结

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

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

前言

工具

项目构建

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

相关工具包推荐

expo go调试

RN项目打包上线

总结