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-android

iOS模拟器（需macOS）：

npx react-native run-ios

Expo项目：

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 assembleRelease

iOS：通过Xcode归档并上传到App Store Connect。

性能优化

• 使用FlatList替代ScrollView渲染长列表。
• 避免内联函数，使用useCallback或useMemo。
• 减少不必要的重新渲染，结合React.memo。

常见问题解决

• 链接原生模块：自动链接（React Native 0.60+）或手动修改Podfile（iOS）。
• 版本兼容性：检查package.json中依赖版本是否冲突。
• 热重载失效：重启Metro打包器或清除缓存。

通过以上步骤，可以快速上手React Native开发并构建跨平台应用。