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

什么是 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：
bash 复制代码
```
npm install -g react-native-cli
```
安装平台开发环境：
- iOS：需要 macOS、Xcode
- Android：需要 Android Studio、JDK、Android SDK
使用 Expo（可选）：
- 对于初学者，可以使用 Expo 工具简化开发流程
bash 复制代码
```
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：

bash 复制代码

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

使用 Expo CLI：

bash 复制代码

expo init MyFirstApp
cd MyFirstApp
expo start

基本应用代码：

javascript 复制代码

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;

常用组件

View：类似于 div，容器组件
Text：文本组件
Image：图片组件
ScrollView：可滚动的容器
FlatList：高性能列表组件
TextInput：文本输入框
TouchableOpacity：透明度反馈的触摸组件
Button：按钮组件

布局

React Native 使用 Flexbox 进行布局：

flex：定义组件如何填充可用空间
flexDirection：定义子元素的排列方向
justifyContent：定义子元素在主轴上的对齐方式
alignItems：定义子元素在交叉轴上的对齐方式

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

什么是 React Native？

React Native 的优势

环境搭建

React Native 基础概念

组件（Components）

状态（State）和属性（Props）

样式（Style）

创建第一个 RN 应用

使用 React Native CLI：

使用 Expo CLI：

基本应用代码：

常用组件

布局

学习资源