如何使用 react native

安装 React Native 开发环境

确保系统已安装 Node.js（版本 >= 14）和 npm/yarn。通过以下命令安装 React Native CLI 工具：

npm install -g react-native-cli

对于 Android 开发，需安装 Android Studio 并配置环境变量；对于 iOS 开发，需安装 Xcode。

创建新项目

使用 CLI 初始化项目：

npx react-native init MyProject

进入项目目录并启动 Metro 打包工具：

cd MyProject
npx react-native start

运行应用

Android：
打开模拟器或连接设备，执行：

npx react-native run-android

iOS：
在项目根目录运行：

npx react-native run-ios

编写组件

在 App.js 中修改默认代码，例如创建一个简单按钮：

import React from 'react';
import { View, Button, Alert } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button
        title="Press Me"
        onPress={() => Alert.alert('Button Pressed')}
      />
    </View>
  );
};
export default App;

添加第三方库

通过 npm/yarn 安装库，例如导航库 react-navigation：

npm install @react-navigation/native react-native-screens

链接原生依赖（React Native 0.60+ 自动链接）：

npx react-native link

调试工具

• React DevTools：独立安装用于检查组件树。
• Flipper：集成日志、网络请求和数据库调试。
• Chrome Debugger：在 Chrome 中调试 JavaScript 代码。

发布应用

Android：
生成签名 APK 或 AAB 文件，通过 android/app/build.gradle 配置签名信息，运行：

cd android && ./gradlew assembleRelease

iOS：
在 Xcode 中选择 Product > Archive，通过 App Store Connect 上传。

性能优化

• 使用 FlatList 替代 ScrollView 渲染长列表。
• 避免内联函数和样式，减少重复渲染。
• 启用 Hermes 引擎（在 android/app/build.gradle 中设置 enableHermes: true）。

常见问题解决

红屏错误：检查 Metro 终端输出，通常为语法错误或缺失依赖。
原生模块问题：确保 pod install（iOS）或 gradlew clean（Android）已执行。
热更新失效：手动触发 Reload（Cmd+R 或双击手机屏幕）。