react native如何
安装开发环境
React Native开发需要配置Node.js、Watchman（macOS）、React Native CLI或Expo CLI。安装Node.js后，通过npm或yarn全局安装React Native CLI：
npm install -g react-native-cli或使用Expo CLI（适合初学者）：
npm install -g expo-cli创建新项目
使用React Native CLI创建项目：
npx react-native init ProjectName使用Expo CLI创建项目：
expo init ProjectName选择模板（如blank或tabs）后，项目会自动生成基础结构。
运行项目
Android模拟器：
启动Android Studio的AVD管理器，创建虚拟设备后运行：
npx react-native run-androidiOS模拟器（需macOS）：
npx react-native run-iosExpo项目：
expo start扫描二维码或在Expo Go应用中打开。
基本组件与API
React Native提供核心组件如View、Text、Button等：
import { View, Text, Button } from 'react-native';
function App() {
return (
<View>
<Text>Hello React Native</Text>
<Button title="Press" onPress={() => alert('Clicked')} />
</View>
);
}样式处理
使用StyleSheet创建样式对象，类似CSS但采用驼峰命名：
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
});导航配置
安装@react-navigation/native及其依赖：
npm install @react-navigation/native @react-navigation/stack示例栈导航配置：
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}调试工具
- React DevTools：调试组件树。
- Flipper：集成日志、网络请求检查。
- Chrome Debugger：在Chrome中调试JavaScript代码。
打包发布
Android：生成签名APK或AAB文件，配置android/app/build.gradle后运行：
cd android && ./gradlew assembleReleaseiOS：通过Xcode归档并上传到App Store Connect。
性能优化
- 使用
FlatList替代ScrollView渲染长列表。 - 避免内联函数，使用
useCallback或useMemo。 - 减少不必要的重新渲染，结合
React.memo。
常见问题解决
- 链接原生模块：自动链接（React Native 0.60+）或手动修改
Podfile（iOS）。 - 版本兼容性：检查
package.json中依赖版本是否冲突。 - 热重载失效：重启Metro打包器或清除缓存。
通过以上步骤，可以快速上手React Native开发并构建跨平台应用。
