React Native 与 Salesforce Mobile SDK

React Native 让你用一套 JavaScript/TypeScript 代码同时构建 iOS 和 Android 原生应用,性能与原生看齐、又免去 Cordova 混合应用的 Web View 性能损耗。本项目带你用 forcereact 脚手架创建 Mobile SDK 应用、配置连接应用、体验快速刷新开发、探索原生容器与桥接架构,并了解 SmartStore 与 Mobile Sync 离线能力。...

📅 2026/10/11 ✍️ ponybai 🏷️ salesforce, headless

React Native 入门(01 Get Started with React Native)

slide_2

本单元你将了解 React Native 是什么、它与 Mobile SDK 的其它开发选项(原生与 Cordova 混合)有何不同,理解 React 语言生态(ES2015 JavaScript、CSS-in-JS 样式、JSX 标记、TypeScript 支持)。然后安装 forcereact——用于创建 Mobile SDK React Native 应用的 CLI 工具,并在 Salesforce 中创建一个用于认证的连接应用。

完成本单元后,你将能够:

  • 理解 React Native 是什么;
  • 理解 React Native 如何支持流行的编程语言;
  • 安装 Mobile SDK with React Native 所需的软件。

什么是 React Native?(一):Mobile SDK 的版图(What Is React Native? (1): The Mobile SDK Landscape)

slide_3

Mobile SDK 提供三条开发路径:

原生应用(Native):Android(Kotlin/Java)和 iOS(Swift/Obj-C),性能与观感最佳,但平台特定代码要各写一遍。

混合应用(Hybrid,基于 Cordova):JavaScript、CSS、HTML、Visualforce,运行在 Web View 容器里,跨平台(写一次),但有性能损耗,且不一定有真正的原生观感。

React Native:用 JavaScript、CSS-in-JS、JSX 标记,却渲染真正的原生设备组件(不是 Web View!),跨平台、原生性能与原生观感兼得。

React Native 巧妙地在两者之间取得了平衡:你用 JavaScript 按 React 模式编写,框架却渲染真实的原生 UI 组件,JavaScript 通过桥接与原生代码通信——既获得原生性能,又共享跨平台代码。这正是"鱼与熊掌兼得"。

什么是 React Native?(二):React 生态(What Is React Native? (2): The React Ecosystem)

slide_4

React 技术分为两部分:ReactJS(用于构建 Web UI 的 JavaScript 库)和 React Native(用 ReactJS 构建原生移动组件的框架)。

React Native 的"语言"(带几个小星号):

  • JavaScript——使用 ES2015(现代 JS),混合开发者可能遇到箭头函数、类、解构、模块等陌生结构;
  • CSS——实际上是模拟 CSS 的 JavaScript 代码,关键区别是标识符用驼峰命名(backgroundColor)而非连字符(background-color);
  • JSX——内嵌在 JavaScript 里的 XML 标记,把 HTML 式标记直接写在 JS 代码里,例如 return <View><Text>Hello</Text></View>;
  • TypeScript——Mobile SDK 9.0+ 支持,编译期静态类型检查,错误是提示性而非阻断性的。

如果你从老式 JavaScript 或传统混合开发转过来,最陌生的可能就是 JSX——它把标记直接嵌进 JavaScript,由 React 编译成原生 UI 组件。

什么是 React Native?(三):开发者为何爱它(What Is React Native? (3): Why Developers Love It)

slide_5

关键优势:测试改动无需重新编译!

  • 传统原生开发:改代码 → 用 Xcode/Gradle 重新构建(数分钟)→ 部署到设备 → 测试;
  • React Native 开发:改代码 → 保存 → 刷新模拟器(数秒)→ 立即看到改动。

这个快速迭代周期是开发者选择 React Native 的头号原因。Mobile SDK 把 React Native 当作完全的一等公民:CLI 工具(forcereact)用于创建项目,认证(OAuth)、SmartStore(离线存储)、Mobile Sync(离线同步)等 Mobile SDK 组件都可用,且 React Native 组件通过 JavaScript 接口桥接到原生 Mobile SDK 代码。

什么是 React Native?(四):前置条件说明(What Is React Native? (4): Prerequisites Note)

slide_6

开始 React Native 开发前:

  1. 完成 Mobile SDK Basics 模块——包括连接应用设置(这是硬性前置条件!);
  2. 完成 Set Up Your Mobile SDK Developer Tools 项目——确保安装了 Android Studio(Android 开发)、Xcode(iOS 开发,仅 macOS)、Node.js 和 npm;
  3. 创建一个 Salesforce 连接应用——每个移动应用认证都需要。

React Native 用 JavaScript 编码,但你仍然需要原生平台工具。macOS 用户可同时开发两个平台;Windows 用户只能开发 Android(iOS 需要 Xcode)。没有这些工具,forcereact 命令和构建步骤都无法工作。

安装 Forcereact(Install Forcereact)

slide_7

Forcereact 是专门用于 Mobile SDK React Native 开发的命令行工具:

  • 前置条件:先完成 "Set Up Your Mobile SDK Developer Tools" 项目;
  • 通过 npm 安装:npm install -g forcereact(具体命令以 Mobile SDK 安装指南为准)。

forcereact 的作用:脚手架化完整的 React Native 项目(带 Mobile SDK 集成)、生成 iOS 和 Android 原生容器、开箱即用地配置认证/SmartStore/Mobile Sync、默认支持 TypeScript。

forcereact 之于 React Native,就像 SFDX 之于元数据——都是创建和管理项目的 CLI。它全局安装一次,任意终端可用。

创建连接应用(一):是什么与为什么(Creating a Connected App (1): What & Why)

slide_8

每个移动应用都需要一个 Salesforce 连接应用来认证:

  • 连接应用授权你的移动应用与 Salesforce 通信;
  • 它提供 OAuth 凭据,让用户安全登录;
  • 它控制你的应用能访问哪些数据和 API。

创建连接应用在 Mobile SDK Basics 模块中已覆盖——这是前置条件,没有它无法完成练习。创建后记下两个值:

  • Callback URL——认证后 Salesforce 重定向到的地址(如 myapp://auth);
  • Consumer Key——向 Salesforce OAuth 服务标识你的应用;
  • Consumer Secret——Mobile SDK 应用不使用,可忽略。

连接应用是你移动应用与 Salesforce 认证系统之间的桥梁——它告诉 Salesforce"这个特定应用被允许代表用户请求访问"。

创建连接应用(二):保存你的值(Creating a Connected App (2): Save Your Values)

slide_9

创建连接应用后:

  1. 复制 Callback URL——格式为自定义 URL scheme(如 firstreact://auth),这是认证后 Salesforce 把用户送回的地方;
  2. 复制 Consumer Key——标识你应用的长字符串;
  3. 忽略 Consumer Secret——Mobile SDK 使用不同的 OAuth 流程,不需要它。

稍后你会把这两个值粘贴到 React Native 项目的配置文件里:iOS 是 bootconfig.plist,Android 是 bootconfig.xml。这些文件由 forcereact 创建项目时生成,含占位值,你用自己的连接应用凭据替换。收好它们,Unit 2 要用。

创建 React Native 应用(02 Create a React Native App)

slide_10

现在让 forcereact 开工。你将创建一个名为 FirstReact、同时面向 iOS 和 Android 的完整 React Native 项目,为每个平台配置连接应用凭据,在模拟器上构建并测试应用,探索 JavaScript 源码,了解 Mobile SDK 的 React Native 组件,并体验实时测试——改代码、刷新模拟器、秒级看到结果。这是 React Native 开发体验的动手核心。

用 Forcereact 创建 React Native 应用(一):脚手架项目(Create a React Native App with Forcereact (1): Scaffold Project)

slide_11

用 forcereact 创建 FirstReact 项目:

  1. 在终端运行 forcereact create;
  2. 按提示输入:Platform(s) 填 ios,android(逗号分隔,两个平台都选)、Application type 按回车(接受默认 react_native_typescript)、Application name 填 FirstReact、Package name 填 com.mytrail.react、Organization name 填 MyTrail, Inc.、Output directory 填 FirstReact。

这会创建一个支持 iOS 和 Android、默认启用 TypeScript、用 Mobile SDK 库构建、位于 ./FirstReact/ 目录的 React Native 应用。首次创建要等几分钟——npm 要下载 React Native 库依赖;后续创建会快得多(库已本地缓存)。

用 Forcereact 创建 React Native 应用(二):项目结构(Create a React Native App with Forcereact (2): Project Structure)

slide_12

你的 FirstReact 项目包含:

FirstReact/
├── ios/          — 原生 iOS 容器(Xcode)
├── android/      — 原生 Android 容器(Android Studio)
├── app.tsx       — 共享的 React Native 代码
│                   (TypeScript/JS + JSX 标记)
├── package.json  — npm 依赖,含 Mobile SDK
│                   React Native 库
└── ...配置文件

关键架构洞察:一个 JavaScript 代码库 → 两个原生应用。app.tsx 里的代码在 iOS 和 Android 之间共享,原生容器引用它而非复制它。原生容器处理:认证(OAuth 登录流程)、把 JS 调用桥接到原生 Mobile SDK、平台特定的 UI 外壳。你的 JavaScript 调用 Mobile SDK 组件,桥接把它翻译成原生调用。

用 Forcereact 创建 React Native 应用(三):设置连接应用值(Create a React Native App with Forcereact (3): Set Connected App Values)

slide_13

把连接应用凭据配置到两个平台项目里:

iOS(Xcode):

  1. 打开 FirstReact/ios/FirstReact.xcworkspace;
  2. 导航到 FirstReact → Supporting Files,打开 bootconfig.plist;
  3. 替换 remoteAccessConsumerKey 和 oAuthRedirectURI 为你的值。

Android(Android Studio):

  1. 导入 FirstReact/android 项目;
  2. 打开 app/src/main/res/values/bootconfig.xml;
  3. 替换 remoteAccessConsumerKey 和 oauthRedirectURI 为你的值。

两个平台需要相同的值。这些文件告诉 Mobile SDK 如何与你的特定组织认证。这是一次性配置,设好后 Mobile SDK 认证流程就用这些值发起 OAuth。

构建并测试 React Native 应用(一):启动开发服务器(Build and Test Your React Native App (1): Start Dev Server)

slide_14

React Native 应用需要一个开发服务器在运行,把 JavaScript 提供给应用:

  1. 在终端 cd 到 FirstReact/ 目录;
  2. 启动开发服务器:yarn start 或 npm start;
  3. 等待 "Loading dependency graph, done"。

这个服务器(Metro bundler)打包你的 JavaScript/TypeScript 代码并提供给运行中的应用。开发时应用从它加载 JS(快速刷新);生产时 JS 被打包进应用本身。然后启动原生应用:iOS 在 Xcode 打开 FirstReact/ios/FirstReact.xcworkspace 点 Run;Android 在 Android Studio 打开 FirstReact/android/ 点 Run。

构建并测试 React Native 应用(二):首次启动(Build and Test Your React Native App (2): First Launch)

slide_15

应用在模拟器上启动时:

  1. 出现登录界面——输入你的 Trailhead Playground 或 Developer Edition 凭据;
  2. 提示时点击 Allow 授权应用访问 Salesforce 数据;
  3. 出现列表视图——这就是你的 FirstReact 应用,显示来自 Salesforce 组织的数据!

恭喜!你构建并启动了一个 Mobile SDK React Native 应用,它通过 OAuth 2.0 认证、连接真实 Salesforce 组织、显示实时数据、运行在原生 iOS/Android 组件上(不是 Web View!)——全部来自一个 JavaScript/TypeScript 代码库。这个看似简单的屏幕背后是海量技术协同工作。

等等——我的 JavaScript 文件在哪?(Wait—Where Are My JavaScript Files?)

slide_16

如果你在 Xcode 或 Android Studio 项目里翻找,会找不到 JavaScript 文件!这是有意为之:

  • JavaScript/TypeScript 文件在 iOS 和 Android 之间共享;
  • 它们位于项目根目录(与 ios/、android/ 同级);
  • 找 app.tsx——这是你的主 React Native 组件文件。

为什么这样设计?DRY 原则(不在每个平台项目里复制共享代码);每个原生项目的构建设置引用共享 JS 位置;运行时原生容器从共享位置加载 JavaScript(开发时从 dev server,发布时从 bundle)。一个 app.tsx = 两个平台的代码。这种"共享 JS + 平台特定原生容器"的分离,正是 React Native 跨平台的架构模式。

Mobile SDK 的 React Native 组件(一):桥接(React Native Components for Mobile SDK (1): The Bridge)

slide_17

Mobile SDK 提供桥接到原生 Mobile SDK 功能的 JavaScript 组件:

  • react.force.oauth.ts——登录、身份与认证,完整处理 OAuth 流程;
  • react.force.net.ts——REST API 辅助类,从 JavaScript 调用任意 Salesforce REST 端点;
  • react.force.smartstore.ts——SmartStore 离线缓存,在设备上安全存储数据、无连接时访问;
  • react.force.mobilesync.ts——Mobile Sync 离线同步,恢复连接时合并离线更改与服务器。

这些组件是原生 Mobile SDK 代码的 JavaScript 封装。你在 JavaScript 里调用 SmartStore 方法,桥接把它翻译成访问设备数据库的原生 iOS/Android 代码。这不是重新实现——它和原生 Mobile SDK 应用用的是同一个 SmartStore,只是提供了 JavaScript 接口。这四个组件是每个 Mobile SDK React Native 应用的基础。

Mobile SDK 的 React Native 组件(二):导入与使用(React Native Components for Mobile SDK (2): Import & Usage)

slide_18

在 app.tsx 中导入 Mobile SDK 组件:

import { oauth, net, smartstore, mobilesync }
  from 'react-native-force';

依赖在 package.json 中定义,指向 SalesforceMobileSDK-ReactNative GitHub 仓库。如果你本地 fork 了这个仓库,可以指向本地分支。

重要:你不能在 React Native 里使用 force.js 库(那是 Cordova 混合应用用的)。它们是不同框架的不同库。与混合开发的关键区别:无 Web View(组件渲染原生 UI)、用 react-native-force 而非 force.js、默认支持 TypeScript、没有 Visualforce 或传统 HTML(一切都是 React 组件)。

组件桥接模式:JavaScript → React Native Bridge → 原生 Mobile SDK → 原生 OS API。

实时测试(一):做一处改动(Real-Time Testing (1): Make a Change)

slide_19

体验 React Native 快速刷新工作流——开发者最爱的功能:

  1. 从 FirstReact/ 根目录用文本编辑器打开 app.tsx;
  2. 找到文件底部附近的 styles 对象定义;
  3. 在 item 属性里加一行 backgroundColor: 'red';
  4. 保存文件;
  5. 切回 iOS 模拟器按 Command-R。

背景立即变红!无需重新构建、无需重新部署、无需 Xcode 编译。编辑 → 保存 → 刷新 → 看到改动,几秒而非几分钟。在原生 iOS 开发里,同样改动要改 Swift 代码、经 Xcode 重新构建(1-3 分钟)、重新部署。快速刷新让你以思维的速度迭代 UI——这就是让怀疑者转粉的 React Native 时刻。

实时测试(二):它如何工作(Real-Time Testing (2): How It Works)

slide_20

快速刷新怎么工作?Metro 开发服务器监视你的文件,当你保存改动时:

  1. Metro 检测到文件变化;
  2. 只重新打包改变了的模块(Hot Module Replacement);
  3. 通过 WebSocket 把更新推给运行中的应用;
  4. React Native 协调引擎对比新虚拟 DOM 与当前原生 UI;
  5. 只重渲染真正改变的组件。

原生应用本身没有重新构建,JavaScript 层被热替换。它比原生重编译更快、比 Web View 重载更无缝,还在刷新间保留应用状态(你在哪个屏幕、加载了哪些数据、表单输入都不会丢)。这是对运行中应用的外科手术式更新,而非简单的页面重载。

探索模板项目(03 Explore the Template Project)

slide_21

你已经构建并测试了应用——现在了解它的内部。你将探索承载 JavaScript 的 iOS 和 Android 原生容器、理解 React Native 与原生 Mobile SDK 之间的桥接如何工作、了解 debug 与 release 构建配置、发现带 SmartStore 与 Mobile Sync 的 MobileSyncExplorerReactNative 示例应用,并找到深入研究原生库代码的资源。本单元把你从 React Native 应用的使用者,变成理解其架构的人。

React Native 的 Mobile SDK 模板(一):模板架构(Templates (1): Template Architecture)

slide_22

forcereact 创建应用时,会用你提供的参数定制一个模板。这个模板定义了一个原生容器,它:直接访问原生 OS、桥接 JavaScript ↔ 原生运行时、处理 Mobile SDK 配置、管理认证、实例化 React Native 根视图。

模板 = 包裹你 JavaScript 代码的原生外壳。模板组件包括:iOS 的 Xcode workspace(含 AppDelegate 和支持文件)、Android 的 Android Studio 项目(含 MainActivity、MainApplication)、共享的 package.json、app.tsx 和 React Native 配置。

模板处理了复杂的 Mobile SDK 初始化、OAuth 认证流程和桥接设置。理解容器里的内容对高级场景很重要——加原生模块、定制认证流程、配置深链接、调整生产构建设置。

React Native 的 Mobile SDK 模板(二):何时修改(Templates (2): When to Modify)

slide_23

大多数开发发生在 JavaScript 层,你很少需要动原生容器。但有些场景需要:

  • 添加需要在 AppDelegate 或 MainApplication 中初始化的第三方原生 SDK;
  • 定制 OAuth 登录体验;
  • 配置深链接或通用链接;
  • 添加 React Native 未暴露的原生能力(自定义相机、蓝牙等);
  • 性能优化——调整桥接配置。

React Native 的一个优势就是不把你锁死在 JavaScript 层——原生容器完全开放,你可以在 Xcode 或 Android Studio 里修改任何东西。大多数应用 JavaScript 层就够用;高级应用才需要改容器。模板让你鱼与熊掌兼得:大部分功能用 JavaScript 快速开发,需要时再降级到原生。

iOS 原生容器(一):结构概览(iOS Native Container (1): Structure Overview)

slide_24

iOS 原生容器看起来与原生 iOS 项目几乎一模一样:

  • AppDelegate——启动时配置 Mobile SDK、处理认证;
  • RCTRootView——充当原生 UI 与 JavaScript 组件之间桥接的 React Native 类。

React 相关的"魔法"集中在 AppDelegate 的 setupRootViewController 方法里:创建 RCTRootView 实例、用 jsCodeLocation(JavaScript bundle 的 URL,开发时是 dev server,发布时是本地文件)初始化、把 RCTRootView 指派为应用的根视图控制器。

RCTRootView 就是那座桥——一边是原生 iOS,另一边是你的 React 组件。你写的每个 React Native 组件都渲染在这个视图里。

iOS 原生容器(二):RCTRootView 深入(iOS Native Container (2): RCTRootView Deep Dive)

slide_25

RCTRootView 的初始化:

RCTRootView *rootView =
  [[RCTRootView alloc]
    initWithBundleURL:jsCodeLocation
    moduleName:@"FirstReact"
    initialProperties:nil
    launchOptions:launchOptions];

参数:

  • jsCodeLocation——JS bundle 的 URL(dev server 或本地文件);
  • moduleName——要渲染为根视图的 React 组件名(与 app.tsx 对应);
  • initialProperties——启动时从原生传给 JavaScript 的数据;
  • launchOptions——iOS 启动选项(通知、深链接等)。

这一句方法调用就在你的 iOS 应用里启动了整个 React Native 运行时。从这里开始,你的 JavaScript 接管——渲染组件、处理交互、调用 Mobile SDK API。你的 JS 组件渲染为原生 iOS 视图(UIView、UITableView、UILabel),而非 Web View。

Android 原生容器(一):结构概览(Android Native Container (1): Structure Overview)

slide_26

Android 原生容器与 iOS 对应,用 Android 特定的类:

app/src/main/java/.../ 下的关键类:

  • MainApplication——继承 Application(标准 Android)并实现 ReactApplication(React Native),创建 ReactNativeHost 用于 JS 桥接,把 Mobile SDK React Native 包传给 React Native 框架;
  • MainActivity——继承 SalesforceReactActivity(再继承 ReactActivity),处理主屏显示、启动 React Native UI。

两个类扮演与纯原生 Mobile SDK Android 项目相同的角色,但继承的是 React Native 基类而非纯原生基类。大部分代码是标准 Android 样板,React 相关集成集中在几个关键方法里。

Android 原生容器(二):ReactNativeHost 与包(Android Native Container (2): ReactNativeHost & Packages)

slide_27

Mobile SDK 在 Android 上如何与 React Native 集成:

  • MainApplication 创建 ReactNativeHost,把 Mobile SDK React Native 包传给 React Native 框架;
  • 这些包定义了 JavaScript 与原生 Mobile SDK 代码之间的桥接;
  • SalesforceReactSDKManager.getReactPackage() 返回一个覆盖 createNativeModules() 的 ReactPackage,提供 SalesforceOauthPackage(OAuth 登录)、SalesforceNetPackage(REST API)、SalesforceSmartStorePackage(离线数据库)、SalesforceMobileSyncPackage(离线同步)。

当你的 JavaScript 调用 smartstore 方法时,桥接经这些包路由到访问 SQLite 的原生 Android 代码。链路:JavaScript → Bridge → ReactPackage → 原生 Mobile SDK → Android OS。包的模块化模式意味着你可以创建新包、注册新原生能力——桥接架构是可扩展的。

Android 原生容器(三):对比 iOS 与 Android(Android Native Container (3): Comparing iOS & Android)

slide_28

原生容器是平台特定的,但遵循相同的架构模式:

  • 应用入口:iOS 是 AppDelegate,Android 是 MainApplication;
  • 主屏:iOS 是 RCTRootView,Android 是 MainActivity(经 ReactActivity);
  • 桥接:iOS 是 RCTBridge,Android 是 ReactNativeHost;
  • 认证与离线:OAuth 与 SmartStore 在两平台共享同一套 Mobile SDK。

Mobile SDK 在两个平台上提供一致的 API。原生实现不同(Objective-C vs Java/Kotlin),但你的 JavaScript 代码毫不在意——它在两个平台上调用同样的方法。桥接抽象掉了所有平台差异,你的 JavaScript 是真正跨平台的。核心 Mobile SDK 功能无需平台特定的条件分支。

配置构建(一):Debug 与 Release(Configuring Your Build (1): Debug vs Release)

slide_29

你的应用在 debug 和 release 模式下运行方式不同:

Debug 模式(开发):JavaScript 从 Metro dev server 加载(localhost:8081)、启用热模块替换、含源码映射便于调试、bundle 更大启动更慢。

Release 模式(生产):JavaScript 打包进应用(无需 dev server)、压缩优化、无源码映射(更小更快)、生产级性能。

Android 配置:android/app/build.gradle 顶部的大段注释解释如何在 debug 与 release 之间切换。iOS 则自动处理——Xcode scheme(Run vs Product→Archive)决定模式。

配置构建(二):为什么重要(Configuring Your Build (2): Why This Matters)

slide_30

构建模式弄对至关重要。开发工作流依赖 debug 模式:编辑 JS → 保存 → dev server 推送更新 → 模拟器刷新。如果开发时误用了 release 模式,快速刷新会停止工作——应用加载的是静态 bundle。

生产部署必须用 release 模式:用户没有 Metro dev server、bundle 必须自包含在应用里、代码应压缩以提升性能、调试日志和源码映射应剥离(安全 + 体积)。

Android 看 android/app/build.gradle 里的注释指引;iOS 用 Xcode scheme 选择器(Run = debug,Archive = release)。永远不要把 debug 构建发给用户——它会暴露源码和内部信息。

React Native 的 Mobile SDK 示例应用(一):MobileSyncExplorer(Sample App (1): MobileSyncExplorer)

slide_31

探索更完整的示例——MobileSyncExplorerReactNative(GitHub 上 SalesforceMobileSDK-Templates 仓库):

它演示了你学到的一切,外加离线功能:

  • SmartStore——离线缓存机制,在设备 SQLite 数据库里安全存储数据,无连接时可用;
  • Mobile Sync——离线同步,恢复连接时自动合并离线更改与服务器记录,处理冲突解决。

用 forcereact createwithtemplate --templaterepo MobileSyncExplorerReactNative 创建。FirstReact 展示基础认证和数据显示,MobileSyncExplorer 则加入了离线能力——离线优先架构对现场服务、销售等连接不可靠的场景至关重要。

React Native 的 Mobile SDK 示例应用(二):构建与运行(Sample App (2): Build & Run)

slide_32

构建并运行 MobileSyncExplorerReactNative:

  1. forcereact createwithtemplate——提供应用名和配置;
  2. cd 进项目目录;
  3. 启动 dev server:macOS 用 yarn start/npm start,Windows 用 yarn run-script start-windows/npm run-script start-windows;
  4. 等待 "To open developer menu press 'd'";
  5. iOS 在 Xcode 打开 .xcworkspace 点 Run;Android 在 Android Studio 打开 android/ 点 Run。

这个应用演示:离线浏览数据(SmartStore)、离线编辑数据、在线时自动同步(Mobile Sync)、冲突处理。探索源码理解离线模式如何在 React Native 中实现。

React Native 的 Mobile SDK 示例应用(三):离线架构(Sample App (3): Offline Architecture)

slide_33

Mobile SDK 里的离线模式:

  1. 数据加载(在线):App → Mobile Sync → REST API → Salesforce,同时写入 SmartStore(本地 SQLite 缓存);
  2. 数据访问(在线或离线):App → SmartStore(始终从本地缓存读——快且离线可用);
  3. 数据更改(离线):用户编辑 → SmartStore → 排队待同步;
  4. 同步(在线时):Mobile Sync 检测到连接 → 推送本地更改到 Salesforce → 拉取远程更改 → 合并冲突 → 更新 SmartStore。

这个"缓存优先"模式确保应用始终可用——在线、离线、间歇性连接都不受影响。这套架构在数千移动工作者日常使用的现场服务与销售应用中久经考验。

深入!(一):探索原生桥接代码(Dig Deeper! (1): Explore the Native Bridge Code)

slide_34

想理解桥接在原生层面如何工作?

iOS——查看 SalesforceReact 项目:SalesforceMobileSDK-ReactNative 仓库的 ios/SalesforceReact/,看 Objective-C 类如何把 JavaScript 调用桥接到原生 Mobile SDK。

Android——查看 SalesforceReact 库:SalesforceMobileSDK-Android 仓库的 libs/SalesforceReact/,看 Java/Kotlin 类如何为 Mobile SDK 功能注册 ReactPackage。

这些是让 React Native + Mobile SDK 工作的开源库。研究它们你能学到:如何创建自己的桥接模块、Mobile SDK 如何把原生功能暴露给 JavaScript、用自定义功能扩展桥接的模式。需要访问 React Native 未暴露的设备传感器?照这些库的模式写原生模块。

深入!(二):资源与下一步(Dig Deeper! (2): Resources & Next Steps)

slide_35

继续 React Native + Mobile SDK 之旅的关键资源:

GitHub 仓库:SalesforceMobileSDK-Templates(ReactNativeTemplate、MobileSyncExplorer)、SalesforceMobileSDK-ReactNative(JavaScript 桥接库)、SalesforceMobileSDK-iOS、SalesforceMobileSDK-Android。

文档:Mobile SDK Development Guide 的 React Native 章节、SmartStore 离线数据、Mobile Sync 离线同步。

你的前进路径:

  1. 修改 FirstReact——加自定义 UI、调用不同 REST 端点;
  2. 研究 MobileSyncExplorer——离线模式;
  3. 探索原生桥接代码——理解架构;
  4. 构建你自己的 React Native Mobile SDK 应用!

你有了工具(forcereact)、平台(Mobile SDK)、框架(React Native)和参考(示例应用 + 开源代码)。欢迎来到 Salesforce 跨平台移动开发的世界!


文章来源:Trailhead - React Native