什么是 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;
常用组件
- View：类似于 div，容器组件
- Text：文本组件
- Image：图片组件
- ScrollView：可滚动的容器
- FlatList：高性能列表组件
- TextInput：文本输入框
- TouchableOpacity：透明度反馈的触摸组件
- Button：按钮组件
布局
React Native 使用 Flexbox 进行布局：
- flex：定义组件如何填充可用空间
- flexDirection：定义子元素的排列方向
- justifyContent：定义子元素在主轴上的对齐方式
- alignItems：定义子元素在交叉轴上的对齐方式
学习资源
- React Native 官方文档
- React Native 中文网
- React Navigation：导航库
- React Native Elements：UI 组件库
