当前位置：首页 > React

如何使用react native

2026-02-12 05:54:27React

安装开发环境

确保系统已安装Node.js（建议版本12以上）。通过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 ProjectName

此命令会创建包含基础模板的React Native项目目录。

运行项目

Android设备： 连接设备或启动模拟器，运行：

npx react-native run-android

iOS设备： 进入项目目录后执行：

cd ProjectName && npx react-native run-ios

基本组件使用

React Native提供核心组件如View、Text、Button等。示例代码：

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

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello React Native</Text>
      <Button title="Press Me" onPress={() => alert('Button pressed')} />
    </View>
  );
};
export default App;

样式处理

使用StyleSheet创建样式对象，类似CSS但采用驼峰命名法：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    padding: 20,
  },
});

导航配置

安装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.Navigator>
    </NavigationContainer>
  );
}