React Native开发

一原生环境开发

1.安装环境

在Mac电脑上安装iOS和Android环境;官方连接

bash 复制代码

export NODE_BINARY=/Users/xiaoliangguo/.nvm/versions/node/v18.20.8/bin/node

java 复制代码

brew install node@18
brew install watchman
安装第三方管理插件yarn,后续可以使用yarn安装第三方
npm install -g yarn

卸载之前工程
npm uninstall -g react-native-cli @react-native-community/cli
安装并创建AwesomeProject
npx @react-native-community/cli init AwesomeProject
指定版本
npx @react-native-community/cli init AwesomeProject --version X.XX.X
模板
npx @react-native-community/cli init BluetoothSDKDemo --template react-native-template-typescript@6.12.0
//创建src/sdk 和src/demo两个目录文件
mkdir -p src/{sdk,demo}
创建index.ts文件
touch src/sdk/index.ts

这个React Native与typescript对应版本 NPM官网

java 复制代码

# 使用 yarn 初始化 TypeScript 项目

npx @react-native-community/cli@latest init BluetoothSDKDemo  --template react-native-template-typescript@10.0.1  --npm-client yarn

npx @react-native-community/cli@latest init BluetoothSDKDemo --template react-native-template-typescript@10.0.1

2. 编译并运行 React Native 应用

bash 复制代码

cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

第三方配置文件package.json,package-lock.json

安装 NPM 依赖

bash 复制代码

curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json

在根目录执行

go 复制代码

yarn install
安装过程创建了一个新的 `node_modules` 文件夹,所有第三方都安装了

上面是跑iOS设备,接下来跑安卓设备,都差不多,安卓运行起来需要配置 Java Development Kit

shell 复制代码

brew install --cask zulu@17

# 获得 JDK 安装程序的路径
brew info --cask zulu@17

# ==> zulu@17: <版本号>
# https://www.azul.com/downloads/
# Installed
# /opt/homebrew/Caskroom/zulu@17/<版本号> (185.8MB) (注意在 Intel 芯片的 Mac 上，路径可能是 /usr/local/Caskroom/zulu@17/<版本号>)
# Installed using the formulae.brew.sh API on 2024-06-06 at 10:00:00

# 导航到上面打印出来的路径
open /opt/homebrew/Caskroom/zulu@17/<版本号> 
# 或者可能是 /usr/local/Caskroom/zulu@17/<版本号>

首先下载和安装 Android Studio 下载Android SDK

bash 复制代码

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

npx react-native doctor 可以检测React Native环境是否完整
//检查设备
adb devices

bash 复制代码

//检查有没有这个第三方
ls node_modules/@react-native/gradle-plugin
//列出build.gradle.kts内容
cat node_modules/@react-native/gradle-plugin/build.gradle.kts
//移除第三方
yarn remove react-native-ble-plx
//添加第三方
yarn add react-native-ble-plx@3.0.0
//移除这些库
rm -rf node_modules yarn.lock package-lock.json
重新安装
yarn install
移除
rm -rf Pods Podfile.lock build
//清空缓存跑
yarn start --reset-cache
跑安卓设备,清空缓存重新跑
cd android
ls
./gradlew --stop
rm -rf ~/.gradle/caches/
rm -rf ~/.gradle/wrapper/
cd ..
yarn android
cd android
./gradlew cleanBuildCache --no-daemon
./gradlew cleanBuildCache --no-daemon
rm -rf ~/.gradle/caches/
rm -rf ~/.gradle/daemon/
./gradlew --no-daemon -v
cd android
./gradlew assembleRelease
./gradlew assembleRelease

二 Expo React Native环境(沙盒环境)

Expo官网

sql 复制代码

npm install -g expo-cli
或
yarn global add expo-cli
//创建expo工程App
npx create-expo-app bleSDK
npx create-expo-app --template(模板)
//创建SDK,里面有带example目录,可以跑example工程
npx create-expo-module ms-data-sdk 
cd bleSDK
//默认是npm,把它移除换成第三方管理工具yarn
rm package-lock.json
rm -rf node_modules
yarn install

# 清除项目缓存
npm install -g expo-cli

expo prebuild --clean
# 重新启动项目,直接跑模拟器
npm run ios

清除缓存运行
npx expo start -c  /  npx expo start --clear
npx expo start --reset-cache  这个运行清空缓存启动,设备扫描进入,如何带有原生组件就必须下面命令执行
//重新编译
npx expo prebuild 
//跑真机
npx expo run:ios --device

**你在用第三方库（需要原生依赖），但跑在 Expo Go 里******

-   Expo Go 只能用 Expo 官方内置模块（Camera、Location 等），第三方的需要原生配置的库是跑不了的。
-   比如 react-native-ble-plx, react-native-sqlite-storage, react-native-fs 等，都不能直接在 Expo Go 用。

**没执行 pod install**（iOS）  
如果你是裸工作流（bare workflow 或 React Native CLI），安装原生依赖后要进 ios/ 下运行：

  


cd ios && pod install && cd ..

**没有重新构建应用******

-   React Native 原生库需要重新编译 App 才能生效。
-   如果只是热更新（fast refresh），原生模块不会自动注入。
-   必须重新运行：  
      
      
      
    npx react-native run-ios
-   # 或
-   npx react-native run-android

安卓清空缓存
./gradlew clean
打包
./gradlew assembleRelease
清空缓存 npx expo start --reset-cache
//跑真机
npx expo prebuild (可选)
npx expo run:android --device

现在自己写SDK放在github私有库中,外界引用有两种情况; 1.直接github配置token; 在目标项目根目录下，新建或修改 .npmrc 文件：

less 复制代码

@MoShenGuo:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

YOUR_GITHUB_TOKEN 就是你在 GitHub 上生成的 Personal Access Token，至少需要勾选 read:packages 权限。在项目里直接执行

kotlin 复制代码

npm install @MoShenGuo/ms-data-sdk

2.直接发布到npm官网上

arduino 复制代码

//清空
npm run clean  
//执行编译
npm run build
npx typedoc  生成报告
//发布到npm
npm publish --access public

需要做混淆的,就是
# 1. 清理旧 build

npm run clean

# 2. 构建 expo 模块 + 输出 .js 和 .d.ts

npm run build:expo

# 3. Rollup 打包混淆

npm run build:rollup

# 4. 生成文档（可选）

npm run docs

# 5. 发布到 npm

npm publish --access public

生成文档是等install第三方在里面才能看到;现在需要官网能直接点击看,就新增一个公共库,关联私有库的docs的

第一步：创建 GitHub Actions Workflow

你需要在私有库里创建一个目录 .github/workflows，然后放一个 workflow 文件。完整步骤如下：

bash 复制代码

mkdir -p .github/workflows

2.在 .github/workflows/deploy-docs.yml 写入以下内容：

yaml 复制代码

name: Deploy Docs to Public Repo

# 当私有库 main 分支 push 时触发
on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. 检出私有库代码
      - name: Checkout private repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      # 2. 设置 Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      # 3. 安装依赖
      - name: Install dependencies
        run: npm install

      # 4. 用 TypeDoc 构建文档
      - name: Build docs with TypeDoc
        run: npx typedoc

      # 5. 推送生成的 docs 到公共仓库
      - name: Deploy docs to public repo
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.BLEDATADOCS }} # 你在私有库设置的 PAT
          publish_dir: ./docs                # TypeDoc 输出目录
          external_repository: MoShenGuo/ms-data-sdk-docs
          publish_branch: main               # 公共库分支
          force_orphan: true                 # 强制覆盖公共库内容
          commit_message: "Update docs from private repo"

第二步：准备公共文档仓库

在 GitHub 上新建一个 公共仓库 （例如：ms-data-sdk-docs）。
打开该仓库的 Settings → Pages ，选择 main 分支作为 GitHub Pages 源。
- 设置好后，文档就会在 https://username.github.io/ms-data-sdk-docs/ 下访问。

第三步：配置访问权限

在 GitHub 生成一个 Personal Access Token (PAT) ，权限勾选：
- repo（访问私有库需要）
- workflow（触发 CI/CD 需要）
在 私有仓库 → Settings → Secrets and variables → Actions 新建一个 Secret：
- Name: DOCS_TOKEN
- Value: 你刚生成的 PAT

第四步：验证

在私有库执行：

sql 复制代码

git add .github/workflows/deploy-docs.yml
git commit -m "chore: add docs deploy workflow"
git push origin main

改变package.json版本号,重新执行命令上传

csharp 复制代码

# 1. 清理旧 build

npm run clean

# 2. 构建 expo 模块 + 输出 .js 和 .d.ts

npm run build:expo

# 3. Rollup 打包混淆

npm run build:rollup

# 4. 生成文档（可选）

npm run docs

# 5. 发布到 npm

npm publish --access public

git push到github需要token给到

perl 复制代码

git remote set-url origin https://<token>@github.com/MoShenGuo/ms-data-sdk.git
再执行git push

外界执行:

kotlin 复制代码

npm install @moshenguo/ms-data-sdk

bash 复制代码

source ~/.zshrc  
终端设备代理后,检查是否设置代理
proxy
env | grep -i proxy
unproxy
env | grep -i proxy
# 1. 重置整个 CoreSimulator 服务

sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService

# 2. 删除所有模拟器缓存（系统会自动重建）

rm -rf ~/Library/Caches/com.apple.CoreSimulator*

rm -rf ~/Library/Developer/CoreSimulator

  


# 3. 重置 Xcode 关联服务

sudo xcode-select --reset

# 1. 列出模拟器 (这会强制系统重建目录)

xcrun simctl list

# 2. 启动默认模拟器 (确保目录生成)

open -a Simulator

flutter工程打包iOS framework包
flutter build ios-framework

React Native开发

一 原生环境开发

1.安装环境

2. 编译并运行 React Native 应用

安装 NPM 依赖

二 Expo React Native环境(沙盒环境)

第一步：创建 GitHub Actions Workflow

第二步：准备公共文档仓库

第三步：配置访问权限

第四步：验证

一原生环境开发