携程前端训练营App开发

在移动端应用开发的主流趋势下，跨端技术凭借一套代码多端运行的核心优势，成为企业降低开发成本、提升开发效率、实现动态能力的关键选择。React Native作为贴合前端开发者技术栈的跨端框架，以JavaScript/React为开发语言，兼顾原生体验与动态更新能力，是企业级移动端跨端开发的重要选型。

跨端技术选型

移动端开发主要分为原生开发（Android/iOS）和跨端开发两类，跨端开发的核心价值在于一套代码多端运行，能有效降低开发成本、提升开发效率，部分方案还具备动态能力，可解决原生应用发版审核的痛点。目前主流的跨端技术方案主要有Web容器、React Native、Flutter三种，各方案的核心特性对比如下：

技术方案	Web容器	React Native	Flutter
开发语言	html/css/javascript	Javascript/React	Dart
技术栈	前端	偏前端	偏客户端
动态能力	支持	支持	不支持
渲染能力	差	一般	好
社区生态	活跃	活跃	活跃

不同方案的适用场景各有侧重：Web容器适合轻量的营销页、活动页开发，开发成本最低但原生体验弱；React Native适配前端开发者主导的跨端开发，兼顾动态能力和原生渲染体验，支持热更新，是企业级跨端开发的主流选择；Flutter适合追求极致渲染性能的场景，基于自绘引擎实现跨端，但无动态能力，发版需走原生审核流程，对前端开发者的学习成本更高。

React Native核心认知

React Native是Facebook推出的原生移动应用开发框架，采用和React一致的语法风格与组件化开发模式，可同时支持iOS和Android两大移动端平台。其核心目标是让开发者仅掌握JavaScript和React的基础知识，就能快速开发出高质量的原生移动应用，无需深入学习Android/iOS的原生开发语言。

React Native的核心优势十分贴合前端开发者的开发习惯，也是其在企业级开发中被广泛使用的原因：基于JavaScript和React的开发方案，前端开发者可快速上手；支持HotReload热重载，开发过程中无需重新编译即可看到修改效果，提升开发效率；依托React的成熟社区，拥有丰富的第三方组件和解决方案；具备强大的热更新能力，无需应用商店审核即可更新业务内容；官方持续对框架进行优化，不断提升性能和兼容性。

React Native开发前序知识

学习React Native前需要具备扎实的基础能力，主要分为JavaScript基础、React核心知识和开发工具使用三部分，这是顺利进行RN开发的前提：

JavaScript相关：掌握模块化开发、ES6新特性、基础数据结构，理解JS的异步编程、原型链等核心概念；
React核心：熟练掌握state、props、组件（类组件/函数组件）、Hooks、组件生命周期等核心知识点，能独立开发React前端应用；
开发工具：会使用npm/yarn进行包管理，掌握git的基础操作，能熟练使用vscode/webstorm/cursor等编辑器进行开发，了解编辑器的RN相关插件配置。

React Native旧架构解析

课程中重点讲解了React Native的旧架构，其核心层级从上至下依次为React层、JavaScript JSC层、Shadow Tree层、Bridge（JSON Async）层、Native Modules层、原生（Android/iOS）层。
RN的业务代码运行在客户端的JSC环境中，底层采用Android/iOS的原生系统渲染UI组件，以此实现原生的交互体验；JS代码和原生端的API、组件调用通过Bridge完成，Bridge采用JSON格式进行异步通信，是连接JS层和原生层的核心桥梁。

React Native核心基础开发

核心UI组件

RN的核心UI组件也被称为宿主组件，底层会映射为对应的Android/iOS原生视图，和Web开发的标签也有对应的关联，是构建RN页面的基础，各核心组件的特性如下：

REACT NATIVE UI 组件	ANDROID原生视图	IOS原生视图	WEB标签	说明
`<View>`	`<ViewGroup>`	`<UIView>`	非滚动`<div>`	支持flexbox布局、样式、触摸处理的基础容器
`<Text>`	`<TextView>`	`<UITextView>`	`<p>`	显示、样式化嵌套文本，可处理触摸事件
`<Image>`	`<ImageView>`	`<UIImageView>`	`<img>`	展示本地/远程图片，支持多种图片格式
`<ScrollView>`	`<ScrollView>`	`<UIScrollView>`	`<div>`	通用滚动容器，可包含多个组件和视图
`<TextInput>`	`<EditText>`	`<UITextField>`	`<input type="text">`	提供文本输入能力，支持输入态样式、事件监听

JSX语法

JSX是RN中创建组件的核心语法，本质是JavaScript的语法糖，可在JS中直接创建页面元素，核心优势是声明式创建界面和动态创建元素，让页面结构和逻辑的结合更直观。
课程示例完善后的实践代码：

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

// 自定义函数组件
const Cat = () => {
  const name = "Maru";
  // 动态拼接文本，支持JS表达式嵌入
  return (
    <View>
      <Text>Hello, I am {name}!</Text>
    </View>
  );
};

export default Cat;

样式开发

RN的样式开发和CSS一脉相承，但也有专属的规则，是开发RN页面的核心基础：

样式值必须是普通的JavaScript对象，样式名遵循CSS命名但采用驼峰命名法（如backgroundColor而非background-color）；
不支持em、rem等CSS单位，尺寸使用设备无关的逻辑像素（dp），适配不同分辨率的移动设备；
可通过内联样式、StyleSheet.create定义组件样式，推荐使用StyleSheet.create做样式抽离，提升代码可维护性；
支持组合样式，可将多个样式对象传入style属性。

课程示例完善后的实践代码：

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

const StyleDemo = () => {
  return (
    <View style={styles.layout}>
      {/* 内联样式，优先级高于全局样式 */}
      <View style={styles.itemLayout}>
        <Text style={{ color: 'green', fontSize: 30 }}>早上好</Text>
      </View>
      <View style={styles.itemLayout}>
        <Text style={styles.text}>中午好</Text>
      </View>
      <View style={styles.itemLayout}>
        {/* 组合样式：全局样式 + 内联样式 */}
        <Text style={[styles.text, { color: 'blue' }]}>晚上好</Text>
      </View>
    </View>
  );
};

// 样式抽离
const styles = StyleSheet.create({
  layout: {
    margin: 30
  },
  itemLayout: {
    marginVertical: 20
  },
  text: {
    fontSize: 20,
    color: 'red'
  }
});

export default StyleDemo;

Flexbox布局

RN的布局引擎基于Yoga实现，主要布局方式为Flexbox，和Web的Flexbox布局核心一致，但有专属的默认配置，是实现RN页面自适应的核心：

flexDirection默认值为column（垂直排序），Web中默认为row；
使用justifyContent控制子元素在主轴的排列方式，alignItems控制子元素在次轴的排列方式；
position属性仅支持relative（默认）和absolute，无fixed布局；
元素宽高可设为自适应（默认）、百分比、固定值，flex属性可实现元素的占比分配。

课程示例完善后的实践代码：

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

const FlexDemo = () => {
  return (
    <View style={styles.container}>
      {/* flex:1 占比1份 */}
      <View style={{ flex: 1, backgroundColor: "red" }} />
      {/* flex:2 占比2份 */}
      <View style={{ flex: 2, backgroundColor: "darkorange" }} />
      {/* flex:3 占比3份 */}
      <View style={{ flex: 3, backgroundColor: "green" }} />
      {/* 固定高度，不参与flex占比 */}
      <View style={{ height: 50, backgroundColor: "#BA55D3" }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // 占满父容器高度
    padding: 20
  },
});

export default FlexDemo;

props与state

props和state是RN中管理组件数据的核心方式，二者协同工作实现组件的动态渲染，核心区别在于是否可变：

props

props是组件的外部属性，本质为JavaScript对象，支持传递基础数据类型、函数、子组件等；props是不可变的，组件内部不能修改props，只能由父组件传递和更新，外部props变更会触发组件的重新渲染。
实践代码：

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

// 父组件
const Profile = () => {
  return (
    // 向子组件传递props
    <Avatar 
      person={{ name: 'Lin Lanying', imageId: '1bX50H6' }} 
      size={100} 
    />
  );
};

// 子组件：解构获取props
function Avatar({ person, size }) {
  const { name, imageId } = person;
  return (
    <View style={{ width: size, height: size, alignItems: 'center' }}>
      <Text>{name}</Text>
      {/* 模拟图片渲染 */}
      <Image 
        source={{ uri: `https://example.com/${imageId}.png` }} 
        style={{ width: size, height: size, borderRadius: size/2 }} 
      />
    </View>
  );
}

export default Profile;

state

state是组件的内部状态，用于管理组件自身的可变数据，state的改变会触发组件的重新渲染；开发中需遵循状态最小化原则，可以计算出来的属性不是状态。在函数组件中，通过useState Hook声明和更新state，类组件中通过this.state和this.setState管理。
核心开发步骤：状态初选→状态确定→状态声明→状态更新。
实践代码：

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

const StateDemo = () => {
  // 声明状态：count，初始值为0
  const [count, setCount] = useState(0);
  // 状态更新：点击按钮修改count
  const handleAdd = () => {
    setCount(prev => prev + 1); // 推荐函数式更新，避免闭包问题
  };

  return (
    <View style={{ alignItems: 'center', marginTop: 50 }}>
      <Text style={{ fontSize: 30 }}>当前计数：{count}</Text>
      <TouchableOpacity 
        style={{ marginTop: 20, padding: 10, backgroundColor: 'blue' }}
        onPress={handleAdd}
      >
        <Text style={{ color: 'white', fontSize: 20 }}>点击加1</Text>
      </TouchableOpacity>
    </View>
  );
};

export default StateDemo;

React Native交互开发

触摸事件

RN中的触摸事件处理和Web开发相似，事件冒泡和捕获遵循DOM标准，不推荐直接给基础组件绑定触摸事件，一般使用Touchable系列组件响应触摸手势，常用的有TouchableOpacity（点击透明效果）、TouchableHighlight（点击高亮效果）、TouchableWithoutFeedback（无反馈效果）。
支持的常见触摸手势：点击、长按、双击，可通过对应的props绑定事件处理函数。
课程示例完善后的实践代码：

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

export default function TouchDemo() {
  // 点击事件
  const handlePress = () => {Alert.alert('Button Pressed')};
  // 长按事件
  const handleLongPress = () => {Alert.alert('Button Long Pressed')};
  // 双击事件（需结合手势库，此处模拟）
  const handleDoublePress = () => { Alert.alert('Button Double Pressed')};

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={handlePress}
        onLongPress={handleLongPress}
        onPressDouble={handleDoublePress}
      >
        <Text style={styles.text}>Press me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    padding: 15,
    backgroundColor: '#1890ff',
    borderRadius: 8
  },
  text: {
    color: 'white',
    fontSize: 18
  }
});

动画

RN提供了完善的动画开发能力，核心有Animated和LayoutAnimation两种方案，满足不同的动画开发需求：

Animated：以声明的形式定义动画的输入与输出，支持组合动画、跟踪状态值、跟踪手势，是RN中最常用的动画方案；需使用专门的可动画化组件（如Animated.View），将动画变量绑定到组件样式属性上实现动画效果。
LayoutAnimation：适用于全局范围的动画，主要用于更新flexbox布局时的过渡效果，无需绑定组件，配置后可自动生效。

Animated实现渐入动画的完善实践代码：

import React, { useRef, useEffect } from 'react';
import { Animated, View, Text } from 'react-native';

const FadeInView = (props) => {
  // 声明动画变量，初始透明度为0
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 执行渐入动画：10秒内透明度从0变为1
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 10000,
        useNativeDriver: true // 使用原生驱动，提升动画性能
      }
    ).start();
  }, [fadeAnim]);

  // 将动画变量绑定到组件透明度属性
  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim
      }}
    >
      {props.children}
    </Animated.View>
  );
};

// 使用渐入动画组件
const AnimationDemo = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <FadeInView style={{ padding: 20 }}>
        <Text style={{ fontSize: 30 }}>渐入动画效果</Text>
      </FadeInView>
    </View>
  );
};

export default AnimationDemo;

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 定义页面组件
const Home = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>首页</Text>
      {/* 跳转到详情页，并传递参数 */}
      <TouchableOpacity
        onPress={() => navigation.navigate('Detail', { name: 'RN导航示例' })}
        style={{ marginTop: 20, padding: 10, backgroundColor: 'blue' }}
      >
        <Text style={{ color: 'white' }}>进入详情页</Text>
      </TouchableOpacity>
    </View>
  );
};

const Detail = ({ route, navigation }) => {
  // 获取路由参数
  const { name } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>{name}</Text>
      {/* 返回上一页 */}
      <TouchableOpacity
        onPress={() => navigation.goBack()}
        style={{ marginTop: 20, padding: 10, backgroundColor: 'red' }}
      >
        <Text style={{ color: 'white' }}>返回首页</Text>
      </TouchableOpacity>
    </View>
  );
};

const Stack = createStackNavigator();

// 配置导航容器
const NavigationDemo = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} options={{ title: '首页' }} />
        <Stack.Screen name="Detail" component={Detail} options={{ title: '详情页' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default NavigationDemo;

React Native数据处理

网络请求

RN中支持Web的所有网络请求方式，如fetch、axios，其中fetch是原生支持的方案，无需安装额外依赖，是开发中最常用的网络请求方式。网络请求一般结合useState和useEffect实现，通过loading状态控制加载提示，捕获请求异常。
课程示例完善后的实践代码：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';

export default function FetchDemo() {
  // 声明状态：加载态、数据、异常
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 发起网络请求
    fetch('https://reactnative.dev/movies.json')
      .then((response) => {
        // 处理请求失败
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then((json) => setData(json.movies)) // 存储数据
      .catch((error) => setError(error.message)) // 捕获异常
      .finally(() => setLoading(false)); // 结束加载态
  }, []);

  // 加载中展示ActivityIndicator
  if (isLoading) {
    return (
      <View style={styles.loading}>
        <ActivityIndicator size="large" color="#1890ff" />
      </View>
    );
  }

  // 展示异常信息
  if (error) {
    return (
      <View style={styles.error}>
        <Text style={{ color: 'red' }}>错误：{error}</Text>
      </View>
    );
  }

  // 渲染数据列表
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={({ id }) => id.toString()} // 唯一key，必须为字符串
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text>上映年份：{item.releaseYear}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24
  },
  loading: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  error: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  }
});

列表渲染

RN中实现列表渲染主要有ScrollView和FlatList两种方式，FlatList是专门为长列表设计的组件，性能远优于ScrollView，开发中优先使用：

ScrollView：会一次性渲染所有子组件，适合短列表，长列表会出现性能问题；
FlatList：采用懒加载方式，只渲染可视区域的组件，支持下拉刷新、上拉加载，核心属性有data（数据源）、keyExtractor（唯一key）、renderItem（渲染子项）。

React Native核心概念

虚拟DOM

虚拟DOM是JSX运行的基础，是对真实DOM的轻量级JavaScript对象描述。RN通过对比新旧虚拟DOM，只更新发生变化的节点，而非重新渲染整个页面，大幅减少了和原生视图的交互次数，提升了页面渲染性能。
虚拟DOM的核心流程：JSX生成初始虚拟DOM→页面更新生成新虚拟DOM→对比新旧虚拟DOM找出差异→仅将差异部分更新到真实原生视图。

虚拟DOM

生命周期

RN的生命周期分为组件生命周期和页面生命周期，组件生命周期又分类组件和函数组件两种实现方式，核心分为挂载、更新、卸载三个阶段，生命周期的核心作用是在组件的不同阶段执行对应的逻辑（如请求数据、销毁定时器）。

类组件生命周期：通过生命周期方法实现，如constructor（构造函数）、componentDidMount（挂载完成）、componentDidUpdate（更新完成）、componentWillUnmount（卸载前）；
函数组件生命周期：通过Hook实现，是目前的主流方式，useEffect可模拟类组件的所有生命周期方法，useLayoutEffect在DOM更新后同步执行，适合处理布局相关逻辑；
页面生命周期：主要处理APP切入后台、页面不可见等场景，可通过RN的AppState API实现，监听APP的状态变化执行对应逻辑。

函数组件生命周期的核心实践：

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

const LifeCycleDemo = () => {
  const [count, setCount] = useState(0);

  // 模拟componentDidMount：挂载完成执行，仅执行一次
  useEffect(() => {
    console.log('组件挂载完成');
    // 监听APP状态
    const subscription = AppState.addEventListener('change', (nextAppState) => {
      console.log('APP状态变化：', nextAppState);
    });
    // 模拟componentWillUnmount：卸载前执行，清除副作用
    return () => {
      console.log('组件卸载前');
      subscription.remove();
    };
  }, []);

  // 模拟componentDidUpdate：count更新时执行
  useEffect(() => {
    console.log('count更新：', count);
  }, [count]);

  return (
    <View style={{ alignItems: 'center', marginTop: 50 }}>
      <Text>{count}</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>加1</Text>
      </TouchableOpacity>
    </View>
  );
};

React Native组件化开发

RN采用基于组件（函数/类组件）的架构模式，组件化是RN开发的核心思想，核心价值是代码复用和职责拆分，让复杂的页面变得可维护。
RN的组件主要分为三类：

宿主组件：RN提供的核心UI组件，如View、Text、Image，底层映射为原生视图；
自定义组件：开发者根据业务需求封装的组件，如商品项、导航栏、按钮，可分为通用组件和业务组件；
第三方组件：社区或第三方开发的组件，如轮播、日历、下拉刷新，可通过npm/yarn安装使用，提升开发效率。

组件化开发的核心原则：单一职责、高内聚低耦合、可复用，在实战中需根据业务逻辑进行合理的组件拆分，如购物车页面可拆分为商品项组件、购物车列表组件、结算按钮组件等。

React Native开发工具与调试

RN提供了完善的开发和调试工具，能有效提升开发效率，定位开发中的问题，课程中重点讲解了三款核心工具：

Flipper：RN官方推荐的调试工具，支持多维度调试，可查看网络请求、日志、组件树、设备信息，还能模拟设备操作，兼容iOS和Android；
React Native DevTools：专门用于调试RN组件的工具，可查看组件的props、state，实时修改属性并查看效果，和React DevTools用法一致；
LogBox：RN内置的日志工具，会在应用中展示控制台的日志和错误信息，支持快速定位问题代码行，开发中可通过console.log/console.error输出日志。

React Native状态管理

当应用的组件层级较深、数据需要跨组件共享时，需使用状态管理方案，RN的状态管理方案分为轻量方案和重量级方案，可根据应用规模选择：

轻量状态管理

使用React内置的Hook实现，如useContext + useReducer，适合中小型应用，无需安装额外依赖，可实现跨组件的状态共享和修改。

Redux（重量级方案）

适合大型复杂应用，是企业级RN开发的主流状态管理方案，核心是集中式管理应用状态，让状态的变化可预测。

Redux三大核心原则

单一数据源：整个应用的状态存储在一个Store中，以单一对象树的形式存在；
State是只读的：不能直接修改State，只能通过触发Action来修改；
使用纯函数执行修改：通过Reducer纯函数接收旧State和Action，返回新的State。

Redux核心组成

Action：具有type字段的普通JavaScript对象，描述应用中发生的事件，可通过payload携带数据；
Reducer：纯函数，接收当前State和Action，根据Action的type决定如何更新状态，并返回新State；
Store：Redux的核心，整合Action和Reducer，存放应用的State，提供dispatch方法触发Action，getState方法获取State。

Redux Toolkit（RTK）

Redux原生使用需要编写大量的样板代码，**Redux Toolkit（RTK）**是官方推荐的Redux开发工具集，简化了Redux的配置和使用，内置了createSlice、configureStore等工具，开发中优先使用RTK。

React Native环境搭建与工程集成

环境搭建

RN的环境搭建分为Expo简易沙盒环境和完整原生环境，可根据开发需求选择，Expo适合快速开发和原型验证，完整原生环境适合企业级项目开发，支持原生模块的定制。

Expo简易环境搭建步骤

安装Expo CLI：npm install -g expo-cli
创建Expo项目：expo init Demo
进入项目目录：cd Demo
启动项目：npm start
调试方式：模拟器（AppStore安装Xcode/Android Studio）、真机（iOS应用商店下载Expo Go，扫码启动）。

完整原生环境

完整原生环境需要配置Xcode、Android Studio、Node.js、Watchman等工具，具体配置可参考RN官方文档

工程集成

RN的工程集成分为纯React Native工程和混合工程，混合工程是企业级开发的主流形式，实现原生应用和RN应用的无缝融合，主要有四种形式：原生页面、RN页面、原生混嵌RN、RN混嵌原生，可根据业务需求灵活搭配。

React Native实战与企业级应用

购物车实战

课程中以购物车为核心实战案例，核心开发思路分为组件拆分和状态抽象：

组件拆分：按业务逻辑拆分为商品项组件、购物车列表组件、数量操作组件、结算按钮组件等，提升组件复用性；
状态抽象：核心状态包括商品列表、购物车商品数组、商品数量、购物车总价，总价通过计算衍生，无需单独声明为状态，通过商品数量和单价实时计算。

企业级RN应用：携程CRN

携程基于React Native封装了企业级的RN框架Ctrip ReactNative（CRN），开源地址：https://github.com/ctripcorp/CRN，CRN的核心关注点包括：

简化业务接入流程，降低RN在企业级项目中的使用成本；
增强RN的功能，扩展专属的API和组件，适配携程的业务场景；
做了大量的运行性能优化和稳定性优化，解决RN在大型应用中的性能问题；
覆盖从文档、工具、开发框架、发布、监控/性能报表的全链路开发体系，适配企业级的开发和运维需求。

AI驱动的React Native开发工具流

当下RN开发已融入AI辅助编程，主流的AI工具可大幅提升开发效率，课程中推荐了Cursor、Claude等工具，可实现代码自动生成、bug修复、代码优化、注释生成等功能，成为RN开发的重要辅助工具。

复习总结

React Native的核心是让前端开发者用JavaScript和React技术栈开发原生移动应用，兼顾跨端开发的效率和原生应用的体验，开发的核心要点可总结为：

掌握RN的基础语法，包括JSX、样式、Flexbox布局、props与state，这是构建RN页面的基础；
理解RN的交互开发，包括触摸事件、动画、导航，是实现移动端原生体验的核心；
熟练使用网络请求和列表渲染，处理移动端的核心数据展示需求；
掌握状态管理方案，根据应用规模选择useContext+useReducer或Redux Toolkit；
遵循组件化开发思想，合理拆分组件，提升代码的可维护性和复用性；
了解RN的企业级优化和工程集成，适配实际的业务开发需求。

RN的学习核心是理论结合实战，通过完成商城原型、购物车等实战案例，可快速掌握RN的开发思路和技巧，同时关注RN的新架构和官方更新，持续提升开发能力。

跨端技术选型

React Native核心认知

React Native开发前序知识

React Native旧架构解析

React Native核心基础开发

核心UI组件

JSX语法

样式开发

Flexbox布局

props与state

props

state

React Native交互开发

触摸事件

动画

导航

基础使用步骤

React Native数据处理

网络请求

列表渲染

React Native核心概念

虚拟DOM

生命周期

React Native组件化开发

React Native开发工具与调试

React Native状态管理

轻量状态管理

Redux（重量级方案）

Redux三大核心原则

Redux核心组成

Redux Toolkit（RTK）

React Native环境搭建与工程集成

环境搭建

Expo简易环境搭建步骤

完整原生环境

工程集成

React Native实战与企业级应用

购物车实战

企业级RN应用：携程CRN

AI驱动的React Native开发工具流

复习总结