当前位置：首页 > news >正文

ReactNative开发实战——React Native开发环境配置指南

news 2025/8/19 11:32:57

一、开发前准备

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 '未检测到镜像')"