熟悉 React 可以帮助理解 React Native（RN）的组件、状态和 Hooks，但不会自动解决移动端问题。原生导航、键盘遮挡、图片内存、系统权限和应用发布都有自己的生命周期。RN 用 React 描述界面，呈现的是原生平台组件，不是把网页直接装进 WebView。
哪些经验可以直接带过来
单向数据流、纯计算和副作用分离、稳定 key、组合式组件都仍然适用。数据校验、API 类型与业务规则通常可以共享；依赖 DOM、CSS 选择器或 localStorage 的实现则需要平台适配。
import { FlatList, Pressable, Text } from "react-native";
type Recipe = { id: string; name: string };
export function RecipeList({ items, onSelect }: {
items: Recipe[];
onSelect: (id: string) => void;
}) {
return (
<FlatList
data={items}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<Pressable
accessibilityRole="button"
accessibilityLabel={`查看${item.name}`}
onPress={() => onSelect(item.id)}
>
<Text>{item.name}</Text>
</Pressable>
)}
/>
);
}
这个例子只展示列表与选择事件；导航、空状态、触控区域和错误反馈需要由实际页面补齐。长列表优先使用具备虚拟化能力的列表组件，不要默认用 ScrollView 一次挂载全部内容。
样式和屏幕要在真机上理解
RN 的样式不是完整浏览器 CSS。布局虽然大量使用 Flexbox，但默认值、文本排版和平台行为不同。安全区域、刘海、系统字体缩放、横竖屏和软键盘都会影响可用空间。
先验证最窄屏、长标题和大字体设置，再追求像素细节。表单按钮被键盘挡住、文字放大后截断，往往比颜色误差更影响使用。
页面离开不一定卸载
导航栈可能保留上一页。组件卸载清理之外，还要根据所用导航方案处理页面失焦，暂停相机、定位或轮询；应用进入后台是另一个生命周期，不能用页面是否显示代替。
请求可能在用户返回上一页后才结束。需要决定结果是缓存供下次进入使用，还是失效丢弃。把每次获得焦点都当成首次加载，会产生闪屏和重复请求。
原生能力要包含拒绝路径
选择照片不仅是调一个 API：还要处理未授权、有限访问、取消、系统设置变化和上传失败。敏感会话不要简单写到普通键值存储，应采用适合平台的安全存储方案，并让后端负责身份有效性。
Expo 可以减少常见项目的原生配置工作，但是否满足需求，要看原生模块、构建方式和平台能力。涉及自定义原生代码时，需要评估开发构建和原生工程维护成本，而不是只看开发预览能否运行。
性能和发布单独验收
在发布构建与目标真机上测列表滚动、图片加载和启动时间，开发模式的开销不能直接代表最终性能。应用分发还涉及签名、证书、审核和平台政策；JavaScript 更新不能替代所有原生二进制变更。
继续阅读：React 状态设计、跨端选型。