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，然后：

# 安装React Native命令行工具npminstall-g react-native-cli# 创建新项目npx react-native init MyFirstApp# 运行iOS应用（需要Mac和Xcode）cdMyFirstApp&&npx react-native run-ios# 运行Android应用（需要Android Studio）npx react-native run-android

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

importReactfrom'react';import{View,Text,StyleSheet}from'react-native';// 这和React组件语法几乎一样constApp=()=>{return(<View style={styles.container}><Text style={styles.text}>Hello,React Native!</Text></View>);};// 样式采用类似CSS的写法，但用的是JavaScript对象conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},text:{fontSize:20,textAlign:'center',margin:10,},});exportdefaultApp;

在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. 样式编写：

import{StyleSheet}from'react-native';conststyles=StyleSheet.create({container:{flex:1,// 类似 flex: 1flexDirection:'row',// 类似 flex-direction: rowjustifyContent:'center',// 类似 justify-content: centerbackgroundColor:'#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解决。

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

4. 处理用户交互

import{TouchableOpacity,Alert}from'react-native';constMyButton=()=>{consthandlePress=()=>{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优化的列表组件：

import{FlatList}from'react-native';constdata=[{id:'1',title:'第一条数据'},{id:'2',title:'第二条数据'},// ...更多数据];constMyList=()=>(<FlatList data={data}renderItem={({item})=><Text>{item.title}</Text>}keyExtractor={item=>item.id}/>);

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

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

// JavaScript端import{NativeModules}from'react-native';// 调用原生模块NativeModules.MyNativeModule.doSomething();// 更常见的是使用社区封装好的库importGeolocationfrom'@react-native-community/geolocation';// 获取当前位置Geolocation.getCurrentPosition(info=>console.log(info));