当前位置：首页 > news >正文

React Native (RN)的学习上手教程

news 来源：原创 2025/6/25 7:52:23

什么是 React Native？

React Native 是由 Facebook 开发的开源框架，允许开发者使用 JavaScript 和 React 构建原生移动应用。它的口号是"学习一次，编写任何平台"。

React Native 的优势

跨平台开发：一套代码可以同时运行在 iOS 和 Android 平台
使用 JavaScript：无需学习 Swift、Objective-C 或 Java/Kotlin
热重载：实时查看代码更改效果
社区活跃：大量的第三方库和组件
原生性能：渲染为原生 UI 组件，而非 WebView

环境搭建

安装 Node.js 和 npm：
- 从 Node.js 官网下载安装
安装 React Native CLI：
```
npm install -g react-native-cli
```
安装平台开发环境：
- iOS：需要 macOS、Xcode
- Android：需要 Android Studio、JDK、Android SDK
使用 Expo（可选）：
- 对于初学者，可以使用 Expo 工具简化开发流程
```
npm install -g expo-cli
```

React Native 基础概念

组件（Components）

React Native 应用由组件构成，组件可以是：

函数组件：简单的 JavaScript 函数
类组件：继承自 React.Component 的类

状态（State）和属性（Props）

Props：从父组件传递给子组件的数据
State：组件内部可以改变的数据

样式（Style）

React Native 使用类似 CSS 的样式，但采用驼峰命名法。

创建第一个 RN 应用

使用 React Native CLI：

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-android  # 或 run-ios

使用 Expo CLI：

expo init MyFirstApp
cd MyFirstApp
expo start

基本应用代码：

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

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的第一个 React Native 应用</Text>
      <Text style={styles.counter}>计数器：{count}</Text>
      <Button title="增加" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  counter: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 20,
  },
});

export default App;