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

一、开发前准备

1. macOS平台基础工具安装

bash 复制代码

brew install node@18
brew install watchman
brew install cocoapods

2. 代理配置

bash 复制代码

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. 初始化项目

bash 复制代码

npx @react-native-community/cli init AwesomeProject

2. pnpm支持配置

javascript 复制代码

// 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. 目录结构创建

bash 复制代码

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路径别名

typescript 复制代码

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

2. Babel配置增强

javascript 复制代码

// 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. 多层级代理配置（新增）

bash 复制代码

# 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. 镜像源加速（兼容性扩展）

bash 复制代码

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

六、验证方案

1. 环境检查脚本

bash 复制代码

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