当前位置：首页 > React

如何使用react native

2026-02-26 15:49:06React

安装开发环境

确保系统已安装Node.js（建议LTS版本）。通过npm或yarn全局安装React Native命令行工具：

npm install -g react-native-cli
# 或
yarn global add react-native-cli

Android开发需安装Android Studio并配置SDK，iOS开发需Xcode（仅限macOS）。

创建新项目

使用以下命令初始化项目（注意项目名称不能包含大写字母）：

npx react-native init MyProject

进入项目目录后启动Metro打包工具：

cd MyProject
npx react-native start

运行应用

Android模拟器：
启动Android Studio的AVD管理器，选择模拟器后运行：

npx react-native run-android

iOS模拟器：
通过Xcode打开ios/MyProject.xcworkspace，或直接运行：

npx react-native run-ios

基础组件使用

React Native提供核心组件替代HTML元素：

<View> 替代<div>
<Text> 替代<p>
<Image> 替代<img>
<ScrollView> 实现滚动区域

示例代码：

import { View, Text, StyleSheet } from 'react-native';

const App = () => (
  <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
  }
});

处理用户交互

使用<TouchableOpacity>或<Button>组件：

import { Button } from 'react-native';

<Button 
  title="Press Me"
  onPress={() => alert('Button pressed')}
/>

导航实现

安装React Navigation库：

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.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}