如何使用react native

安装开发环境

确保系统已安装Node.js（建议LTS版本）。通过npm或yarn全局安装React Native命令行工具：

npm install -g react-native-cli
# 或
yarn global add react-native-cli

Android开发需安装Android Studio并配置SDK路径；iOS开发需Xcode（仅限macOS）。

创建新项目

使用以下命令初始化项目：

npx react-native init ProjectName

这将生成一个包含基础模板的React Native项目目录。

运行开发服务器

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

npm start
# 或
yarn start

启动应用

Android模拟器：
确保模拟器已运行，执行：

npx react-native run-android

iOS模拟器：
在项目目录下执行：

npx react-native run-ios

编写组件

编辑App.js文件，使用React组件语法：

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

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

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

export default App;

添加第三方库

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

npm install @react-navigation/native react-native-screens react-native-safe-area-context

调试工具

• React Developer Tools：调试组件层次结构。
• Flipper：查看日志、网络请求和数据库。
• 摇动设备或按Ctrl+M（Android模拟器）打开开发者菜单。

构建发布版本

Android：
生成签名APK或AAB文件，参考官方文档配置android/app/build.gradle。

iOS：
通过Xcode的Product > Archive生成IPA文件。

常用组件和API

• 基础组件：View, Text, Image, ScrollView, FlatList
• 交互组件：Button, TextInput, TouchableOpacity
• 样式：StyleSheet创建样式对象，支持Flexbox布局
• 平台特定代码：使用.ios.js或.android.js后缀区分文件

性能优化

• 避免内联函数和样式
• 使用memo或useMemo减少重渲染
• 虚拟列表（FlatList）替代普通列表
• 减少不必要的状态更新

跨平台适配

使用Platform模块检测平台：

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});