如何使用react native

安装开发环境

确保系统已安装Node.js（建议版本≥12）和npm/yarn。通过命令行安装React Native CLI工具：

npm install -g react-native-cli

对于Android开发，需安装Android Studio并配置ANDROID_HOME环境变量；iOS开发需Xcode（仅macOS可用）。

创建新项目

使用以下命令初始化项目（以TypeScript模板为例）：

npx react-native init MyApp --template react-native-template-typescript

项目结构说明

• /android 和 /ios：原生平台代码
• /src：推荐存放业务代码的目录
• App.tsx：应用入口文件
• metro.config.js：打包配置

运行应用

Android模拟器：

react-native run-android

iOS模拟器：

react-native run-ios

核心开发要点

组件开发：使用函数式组件与Hooks

import { useState } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
  return <Text>{count}</Text>;
};

样式处理：StyleSheet API

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

常用第三方库

• 导航：@react-navigation/native
• 状态管理：redux 或 mobx
• UI组件库：react-native-paper 或 native-base
• 网络请求：axios

调试技巧

• 摇动设备调出开发者菜单
• 使用react-devtools独立应用
• 日志查看：console.log会在终端和浏览器调试工具输出

打包发布

Android：

cd android && ./gradlew assembleRelease

iOS： 通过Xcode的Archive功能生成ipa文件

性能优化建议

• 使用FlatList替代ScrollView渲染长列表
• 避免内联函数和样式
• 使用React.memo优化组件渲染
• 复杂计算移至useMemo/useCallback

平台特定代码处理

通过文件后缀区分：

MyComponent.ios.js
MyComponent.android.js

或使用PlatformAPI：

import { Platform } from 'react-native';
const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});