React Native
中级App
React Native 是用 React 和 JavaScript 或 TypeScript 开发移动应用的跨端框架,界面由原生组件呈现。它让你在 iOS 与 Android 间复用业务逻辑和部分界面,减少分别开发两套应用的重复工作。
你可能会说:「我想做一个苹果和安卓都能安装的 App,尽量共用代码,还能调用相机。」
读之前建议先了解
动手看看商品收藏页在两种手机上运行
1
先在 iOS 上打开商品页。共用的 React 代码描述商品标题和收藏按钮,业务逻辑负责管理收藏状态。
要点React Native 怎样把共用代码变成手机应用?
- 1
用组件描述原生界面
你用 React 组件描述页面,但写的是 View、Text 等组件,而不是网页的 div。它们对应原生视图,所以应用不是把整个网站装进一个浏览器窗口。
- 2
共用逻辑仍需适配两端
登录流程、接口请求和不少页面可以共用,但键盘、权限和系统导航在两端有差异。因为运行环境不同,所以我们仍要分别测试,必要时写平台专用代码。
- 3
设备能力通过模块接入
做拍照上传时,你可以通过现成模块调用相机,再把照片交给共用的上传逻辑。如果模块不支持目标功能,就可能需要补写 Swift 或 Kotlin 等原生代码。
容易混淆的地方
React 是描述界面的库,React Native 则把这套组件思路用于移动应用;网页里的 HTML 标签和 CSS 不能直接照搬。它也不同于用 WebView 包装网页:主要界面由原生组件呈现,但这不代表所有代码都能跨平台复用。
什么时候用
适合用
- 做同时面向苹果和安卓的预约 App,共用登录、订单和个人中心。
- 团队熟悉 React,需要开发带拍照上传和消息通知的移动应用。
- 给已有原生 App 增加相对独立的业务页面,希望两端共用迭代。
不适合用
- 只做通过链接访问的营销网站,用网页框架更直接,也方便搜索引擎收录。
- 产品只在微信小程序里运行,选小程序原生开发或支持该平台的框架。
- 核心是复杂三维游戏与实时物理模拟,优先考虑 Unity 等游戏引擎。
练一练选一个答案,看看解释
你要做一个苹果和安卓都能安装的巡检 App,包含表单、拍照和离线记录,团队熟悉 React。怎样判断 React Native 是否合适?
让 AI 帮你做复制给 AI Agent 直接用
请用 React Native 和 TypeScript 开发面向 iOS、Android 的巡检 App,包含表单、拍照上传和离线草稿。先说明模块选择与平台差异,再实现最小流程,并给出两端测试步骤;未接入的能力请明确标注。