如何使用react native
安装开发环境
确保系统已安装Node.js（建议LTS版本）。通过npm或yarn全局安装React Native命令行工具：
npm install -g react-native-cli
# 或
yarn global add react-native-cliAndroid开发需安装Android Studio并配置SDK路径；iOS开发需Xcode（仅限macOS）。
创建新项目
使用以下命令初始化项目：
npx react-native init ProjectName这将生成一个包含基础模板的React Native项目目录。
运行开发服务器
进入项目目录后启动Metro打包工具：
npm start
# 或
yarn start启动应用
Android模拟器：
确保模拟器已运行，执行：
npx react-native run-androidiOS模拟器：
在项目目录下执行：
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,
});
