React Native入门详解

一、React Native是什么？

简单来说，React Native是一个让你用JavaScript和React编写真正原生移动应用的框架。

React Native 的三种身份，用大白话说就是：

它不是网页套壳（不像 Cordova 在 App 里内嵌一个浏览器来跑你的代码）
它不转译代码（不会把你的 JS 代码变成 Java 或Swift 代码）
它是"传话员"（你的 JavaScript 通过它"告诉"手机原生系统要画什么界面）

用个形象的比喻：传统混合应用像是"在浏览器中运行网页然后打包成App"，而React Native则是"用JavaScript操作原生组件搭建真正的本地程序"。

二、为什么需要React Native？

在React Native出现之前，移动开发者面临三大困境：

1. 人力成本翻倍

开发一个应用需要：

iOS团队：Swift/Objective-C + Xcode
Android团队：Java/Kotlin + Android Studio
结果：两套代码、两个团队、双倍时间和成本

2. 体验与效率的权衡

纯原生：体验最好，但效率最低
混合应用(H5)：一次编写，体验打折扣
跨平台(如Flutter)：较新，生态有待完善

3. 技术栈分裂

Web开发者难以进入移动领域，移动开发者难以共享Web生态

React Native的解决方案：让Web开发者用已有技能进入移动开发，同时保持接近原生的性能。

三、核心原理

理解React Native的工作原理，能帮你更好地使用它：

复制代码

JavaScript代码 → React Native桥 → 原生组件
      ↑               ↓
  状态更新 ←  消息传递 → 原生事件

关键机制：

三个线程模型：
- JavaScript线程：运行你的业务逻辑
- 原生UI线程：处理UI渲染
- 影子线程：计算布局（在后台）
异步通信：JS和原生通过异步JSON消息通信，避免阻塞
虚拟DOM差异更新：React的虚拟DOM机制在这里同样适用，只更新变化的部分

四、快速上手

首先确保安装了Node.js，然后：

bash 复制代码

# 安装React Native命令行工具
npm install -g react-native-cli

# 创建新项目
npx react-native init MyFirstApp

# 运行iOS应用（需要Mac和Xcode）
cd MyFirstApp && npx react-native run-ios

# 运行Android应用（需要Android Studio）
npx react-native run-android

现在看看自动生成的App.js：

js 复制代码

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

// 这和React组件语法几乎一样
const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

// 样式采用类似CSS的写法，但用的是JavaScript对象
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

在RN中，我们用<View>代替了<div>，用<Text>代替了<span>。这是因为移动端没有div和span这些Web概念。

五、RN语法详解

1. 组件差异对照表

Web (React)	React Native	说明
`<div>`	`<View>`	容器组件，类似div
`<span>`/`<p>`	`<Text>`	所有文本必须放在Text组件内
`<img>`	`<Image>`	图片组件，用法略有不同
`<input>`	`<TextInput>`	文本输入框
CSS样式	StyleSheet对象	样式写在JavaScript中

2. 样式编写：

js 复制代码

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,                    // 类似 flex: 1
    flexDirection: 'row',       // 类似 flex-direction: row
    justifyContent: 'center',   // 类似 justify-content: center
    backgroundColor: '#fff',    // 背景色，注意是驼峰命名
    paddingHorizontal: 10,      // 左右内边距，Web中要写paddingLeft和paddingRight
  },
  title: {
    fontSize: 18,              // 字号，没有px单位！
    fontWeight: 'bold',        // 字重
    color: '#333',
  },
});

重要区别：

没有单位：React Native中fontSize: 18就是18，不是18px
少数属性名不同：如paddingHorizontal代替padding-left和padding-right
没有CSS选择器：样式直接绑定组件

3. 布局核心：Flexbox为主

如果你熟悉CSS Flexbox，那么RN的布局你会很好上手。很多布局需求都能用Flexbox解决。

js 复制代码

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
  <View style={{flex: 1, height: 50, backgroundColor: 'blue'}} />
</View>

4. 处理用户交互

js 复制代码

import { TouchableOpacity, Alert } from 'react-native';

const MyButton = () => {
  const handlePress = () => {
    Alert.alert('提示', '你点击了按钮！');
  };
  
  return (
    <TouchableOpacity 
      onPress={handlePress}
      style={styles.button}
    >
      <Text style={styles.buttonText}>点击我</Text>
    </TouchableOpacity>
  );
};

注意：RN中没有<button>，使用TouchableOpacity、TouchableHighlight或Pressable。

5. 列表渲染：FlatList和SectionList

对于长列表，不要用map渲染所有项目，使用RN优化的列表组件：

js 复制代码

import { FlatList } from 'react-native';

const data = [
  {id: '1', title: '第一条数据'},
  {id: '2', title: '第二条数据'},
  // ...更多数据
];

const MyList = () => (
  <FlatList
    data={data}
    renderItem={({item}) => <Text>{item.title}</Text>}
    keyExtractor={item => item.id}
  />
);

六、原生模块：当JavaScript能力不够时

React Native的强大之处在于可以轻松调用原生功能：

js 复制代码

// JavaScript端
import { NativeModules } from 'react-native';

// 调用原生模块
NativeModules.MyNativeModule.doSomething();

// 更常见的是使用社区封装好的库
import Geolocation from '@react-native-community/geolocation';

// 获取当前位置
Geolocation.getCurrentPosition(info => console.log(info));

几乎所有原生功能都有对应的React Native库：相机、地理位置、推送通知、生物识别...

七、热重载

这是React Native受欢迎的重要原因之一：

热重载(Hot Reloading)：修改代码后立即看到变化，保持应用状态
快速刷新(Fast Refresh)：React Native 0.61+的默认功能，更稳定

不需要经历"编译-部署-启动"的漫长等待，保存文件就能看到更新！

React Native入门详解

一、React Native是什么？

二、为什么需要React Native？

1. 人力成本翻倍

2. 体验与效率的权衡

3. 技术栈分裂

三、核心原理

关键机制：

四、快速上手

五、RN语法详解

1. 组件差异对照表

2. 样式编写：

3. 布局核心：Flexbox为主

4. 处理用户交互

5. 列表渲染：FlatList和SectionList

六、原生模块：当JavaScript能力不够时

七、热重载

八、使用场景

该用React Native的场景：

慎重考虑的场景：