react如何做app
React 开发移动应用的两种主流方式
React Native 是目前最流行的基于 React 的跨平台移动应用开发框架，允许使用 JavaScript 和 React 语法构建原生应用。其核心原理是将 React 组件转换为原生视图组件。
Expo 是基于 React Native 的开发工具链，提供了更简单的开发体验和丰富的内置功能（如推送通知、相机访问等）。适合快速原型开发，但某些高级原生功能可能需要脱离 Expo 的"托管工作流"。
开发环境配置
安装 Node.js（建议 LTS 版本）和 npm/yarn 包管理器。对于 React Native 开发，需要安装 Android Studio（Android 开发）和/或 Xcode（iOS 开发）。
使用以下命令创建新项目：
npx react-native init MyApp或使用 Expo：
npx create-expo-app MyApp基础组件使用
React Native 提供了一系列核心组件替代 HTML 元素：
<View>替代<div><Text>替代<p>或<span><Image>替代<img><ScrollView>提供可滚动容器<TextInput>替代<input><Button>提供基础按钮组件
示例组件代码：
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: 20,
fontWeight: 'bold',
},
});
export default App;样式处理
React Native 使用 JavaScript 对象定义样式，而非 CSS 文件。所有核心组件都接受 style 属性。StyleSheet API 提供性能优化和类型检查。
布局默认使用 Flexbox 模型，与 Web 的 Flexbox 类似但存在一些差异（如默认 flexDirection 为 column 而非 row）。
导航解决方案
React Navigation 是最流行的导航库，提供堆栈导航、标签导航、抽屉导航等模式。基本安装：
npm install @react-navigation/native @react-navigation/native-stack示例堆栈导航配置：
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}平台特定代码
可以通过文件扩展名区分平台（如 Component.ios.js 和 android.js），或使用 Platform API：
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});性能优化技巧
使用 FlatList 替代 ScrollView 渲染长列表，它只会渲染当前可见区域的元素。对于复杂交互，考虑使用原生驱动动画（useNativeDriver: true）。
避免在 render 方法中执行复杂计算，使用 useMemo 和 useCallback 缓存计算结果和函数引用。定期运行性能监测工具（如 React Native Debugger 或 Flipper）识别性能瓶颈。
构建与发布
Android 发布需要生成签名 APK 或 AAB：
cd android && ./gradlew assembleReleaseiOS 发布需要通过 Xcode 归档项目并提交到 App Store Connect。使用 Expo 时，可以通过 expo publish 命令更新应用，或 expo build 生成独立二进制文件。
测试与调试
React Native 提供 Chrome 开发者工具支持，可以启用远程调试。React DevTools 也支持 React Native 组件树检查。对于原生模块问题，需要分别使用 Android Studio 或 Xcode 进行调试。
单元测试可以使用 Jest，组件测试使用 React Testing Library 或 React Native Testing Library。端到端测试可以考虑 Detox 或 Appium。
