如何使用 react native

安装开发环境

确保系统已安装 Node.js（建议 LTS 版本），可通过官网下载安装包。完成后验证版本：

node -v
npm -v

安装 React Native 命令行工具：

npm install -g react-native-cli

创建新项目

通过命令行初始化项目（替换 MyProject 为实际名称）：

npx react-native init MyProject

进入项目目录启动开发服务器：

cd MyProject
npx react-native start

运行应用

Android 设备
需提前安装 Android Studio 并配置模拟器或连接真机：

npx react-native run-android

iOS 设备
需 Xcode 环境（仅 macOS 支持）：

npx react-native run-ios

编写基础组件

创建 App.js 示例代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello React Native</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
  },
});

export default App;

调试与热更新

• 摇动设备或按快捷键（iOS 模拟器按 Cmd+D，Android 按 Cmd+M）打开开发者菜单。
• 启用 Hot Reloading 实现代码保存后自动刷新。
• 使用 Chrome 开发者工具调试 JavaScript 代码。

添加第三方库

通过 npm 安装常用库（如导航库 react-navigation）：

npm install @react-navigation/native

配置依赖后即可在代码中引入：

import { NavigationContainer } from '@react-navigation/native';

构建发布版本

Android
生成签名 APK 或 AAB 文件：

cd android && ./gradlew assembleRelease

iOS
通过 Xcode 选择 Product > Archive 生成 IPA 文件。

注意事项

• 确保 Android SDK 和 Java 环境变量配置正确。
• iOS 开发需 Apple 开发者账号和有效证书。
• 定期更新 React Native 版本以获取最新功能和安全修复。