一、開發前準備

1. macOS平臺基礎工具安裝

brew install node@18
brew install watchman
brew install cocoapods

2. 代理配置

npm config set proxy http://127.0.0.1:7890
npm config set https-proxy http://127.0.0.1:7890# 新增擴展建議（可選配置）
echo 'export ALL_PROXY=http://127.0.0.1:7890' >> ~/.zshrc  # 全局代理設置
git config --global http.proxy http://127.0.0.1:7890       # Git代理設置

二、項目創建

1. 初始化項目

npx @react-native-community/cli init AwesomeProject

2. pnpm支持配置

// metro.config.js
const path = require('path');
const { getDefaultConfig } = require('metro-config');module.exports = (async () => {const {resolver: { sourceExts, assetExts },} = await getDefaultConfig();return {resolver: {extraNodeModules: new Proxy({},{get: (_, name) => path.join(process.cwd(), `node_modules/${name}`),}),assetExts: [...assetExts, 'hcscript'],sourceExts: [...sourceExts, 'ts', 'tsx'],},transformer: {getTransformOptions: async () => ({transform: {experimentalImportSupport: false,inlineRequires: true,},}),},};
})();

三、項目結構配置

1. 目錄結構創建

mkdir -p src/{assets/{fonts,images},components/{common,glucose,charts},constants,contexts,hooks,navigation,screens/{TodayScreen,TrendsScreen,ProfileScreen},services,store,styles,utils}

結構示意圖

src/
├── assets/          # 靜態資源
│   ├── fonts/       # 字體文件
│   └── images/      # 圖片資源
├── components/      # 組件庫
│   ├── common/      # 通用組件
│   ├── glucose/     # 血糖相關組件（保留您特定業務組件）
│   └── charts/      # 圖表組件
└── ...              # 其他原始目錄結構

四、開發配置優化

1. TypeScript路徑別名

// tsconfig.json
{"compilerOptions": {"baseUrl": ".","paths": {"@assets/*": ["src/assets/*"],"@components/*": ["src/components/*"]// ...其他原始別名配置}}
}

2. Babel配置增強

// babel.config.js
module.exports = {presets: ['module:@react-native/babel-preset'],plugins: [['module-resolver',{root: ['./src'],extensions: ['.ios.js','.android.js', '.js','.ts','.tsx','.json'],alias: {'@assets': './src/assets','@components': './src/components',// ...其他別名}}],'react-native-worklets/plugin' ]
};

五、編譯加速方案

1. 多層級代理配置（新增）

# Android專屬代理（gradle.properties）
echo "systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=7890
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=7890" > ~/.gradle/gradle.properties# CocoaPods代理
echo "install! 'cocoapods', :http_proxy => 'http://127.0.0.1:7890', :https_proxy => 'http://127.0.0.1:7890'" >> Podfile

2. 鏡像源加速（兼容性擴展）

# 可選清華源
npm config set registry https://registry.npmmirror.com
pod repo add tsinghua https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git

六、驗證方案

1. 環境檢查腳本

#!/bin/zsh
echo "=== 環境驗證報告 ==="
echo "Node版本: $(node -v)"
echo "npm鏡像源: $(npm config get registry)"
echo "PNPM版本: $(pnpm -v 2>/dev/null || echo '未安裝')"
echo "iOS工具鏈: $(pod --version 2>/dev/null || echo '未配置')"
echo "Android構建: $(grep maven.aliyun.com android/build.gradle 2>/dev/null && echo '阿里云鏡像已配置' || echo '未檢測到鏡像')"