React Native DApp 开发全栈实战·从 0 到 1 系列(eas构建自定义客户端)

前言

Expo Go 只能调用官方 SDK;若想在 React Native DApp 里集成任意第三方原生库,就必须「自定义客户端」。下文以 Windows → Android 为例,演示「全程代理」构建的完整流程。

一、前置准备

  1. 需要有提前注册一个expo 账号;
  2. 本地已搭好 HTTP/SOCKS5 代理(端口示例:7890),关于梯子相关的这里就不赘述。

二、构建前准备工作(本地预检,强烈建议)

说明 :本身代理就慢,在构建之前本地跑一遍,处理冲突等一些问题,直到全绿为止

csharp 复制代码
# 查看是否冲突 第一次检测
npx expo-doctor@latest
# 任何 **红色 ✖**(依赖冲突 / peer deps 不兼容)→ 一律按提示修复
npx expo install --check 
# 如果有冲突
npx expo install --fix//自动对齐版本
# 解决之后 重新运行
npx expo-doctor@latest --verbose;//修复后,再跑一次,应该是全绿

三、代理构建自定义客户端(以window系统,构建android自定义客户端)

1. 初始化 EAS 配置生成项目id 可以在expo仪表盘上查看项目

csharp 复制代码
# 登录
eas login //输入账号、密码
# EAS 配置
eas init

2. 一次性代理指令(详细步骤)

ini 复制代码
# cmd终端
set http_proxy=http://127.0.0.1:xxxx(例如:7890) 
set https_proxy=http://127.0.0.1:xxxx(例如:7890)
# or
# powershell终端
$Env:HTTP_PROXY  = "http://127.0.0.1:xxxx(例如:7890)"
$Env:HTTPS_PROXY = "http://127.0.0.1:xxxx(例如:7890)"
# 关于端口号说明:端口取自vpn的端口号
# 测试代理
curl -I https://expo.dev
or
Invoke-WebRequest -Uri https://expo.dev -Method Head//查看StatusCode 200
# 登录账号
eas login//输入账号和密码
# 构建 开发版的自定义客户端
eas build --platform android --profile development

指令汇总

终端 命令
CMD set http_proxy=http://127.0.0.1:7890
PowerShell $Env:HTTP_PROXY = "http://127.0.0.1:7890"
网络测试 curl -I https://expo.dev 或 Invoke-WebRequest -Uri https://expo.dev -Method Head

3. eas.json配置 添加代理

go 复制代码
  {
    "cli": {
      "version": ">= 16.17.4",
      "appVersionSource": "remote"
    },
    "build": {
      "development": {
        "developmentClient": true,
        "distribution": "internal",
        "android": { "buildType": "apk" },
        "env": {
          "HTTP_PROXY": "http://192.168.1.xxx:aaa",// xxx:通过ipconfig查看 aaa:vpn的代理的端口
          "HTTPS_PROXY": "http://192.168.1.100:7890"//
          // 不使用代理
          // "NO_PROXY": "localhost,127.0.0.1,.local,.internal"
          }
      },
      "preview": {
        "distribution": "internal"
      },
      "production": {
        "autoIncrement": true
      }
    },
    "submit": {
      "production": {}
    }
    }
  ```

4. 在 Windows 终端里重新给 EAS CLI 配代理

ruby 复制代码
# 先清空旧代理
 Remove-Item Env:HTTP_PROXY -ErrorAction SilentlyContinue
 Remove-Item Env:HTTPS_PROXY -ErrorAction SilentlyContinue

 # 再写入正确的端口(假设是 7890)
 $Env:HTTP_PROXY  = "http://127.0.0.1:7890"
 $Env:HTTPS_PROXY = "http://127.0.0.1:7890"

 # 测试网络
 irm -Method Head -Uri https://expo.dev | Select-Object StatusCode
 # 返回 200 即可

5. 重新登录

bash 复制代码
eas logout   # 清掉旧会话
eas login    # 现在会走 7890

6. 再次构建

css 复制代码
# 构建 android 开发版
eas build --platform android --profile development

四、关于自定义客户端调试问题

  • 真机安装:构建的包通过expo仪表盘下载到手机上,然后安装
  • 调试启动 Metro 服务器 :npx expo start --dev-client

总结

以上即为通过代理构建自定义客户端的完整流程,涵盖常见问题及解决方案。亲测有效,但耗时较长,建议预留充足时间。

相关推荐
kjmkq12 小时前
区块链项目出海宣发,依托全球Web3垂直媒体快速建立行业背书
web3·区块链·媒体
梦帮科技2 天前
【3.0修订版】音乐权利 NFT:MusicRightsNFT 的确权思想与授权关联
网络协议·算法·web3·区块链·密码学·智能合约·零知识证明
怒放de生命20102 天前
2026年新加坡TOKEN2049大会:传统金融与加密世界的深度融合与现实叩问
人工智能·web3·去中心化·区块链·以太坊·分布式账本
enjoywindstorm2 天前
移动端原生框架对比评测
react native
巨擎网络2 天前
为什么打开 App,消息才一股脑涌进来?
网络协议·app
27669582923 天前
麦当劳APP authorization算法分析
app·frida·麦当劳·麦当劳app·app逆向实战·app数据采集·frida app逆向
传奇开心果编程3 天前
【声明式UI开发实用技术学与练】第8课 状态提升与下放
学习·flutter·react native·ui·swiftui·composer
传奇开心果编程3 天前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程4 天前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
500844 天前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos