本项目用 TextInput、Pressable、FlatList 和安全区域组件实现新增、完成和过滤。它保留 React 的单向数据流,同时处理原生控件和屏幕边界。数据在内存中,退出重启会重置;没有接入远程同步。
建立 Expo 起点
安装符合当前 Expo 要求的 Node 和包管理器。在新目录执行:
npx create-expo-app@latest study-native --template blank-typescript
cd study-native
npx expo install react-native-safe-area-context
下载 App.tsx 覆盖项目根目录 App.tsx,保留模板入口和配置。使用 Expo 安装命令选择与 SDK 匹配的原生依赖,避免随意把 React Native、React 和 Expo 升到彼此不兼容的版本。
npx tsc --noEmit
npx expo start
若要检查 Web,再运行 npx expo install react-dom react-native-web @expo/metro-runtime,并通过 expo start 的 Web 入口或 npx expo export –platform web 构建。Web 导出和类型检查能发现一部分问题,不能证明 Android/iOS 原生界面、键盘与无障碍行为正确。
数据与界面
输入由 draft 管理,新增时去掉首尾空格并产生稳定 ID;只有非空内容能进入列表。FlatList 接收过滤后的新数组,keyExtractor 返回业务 ID。完成更新不直接修改 item,避免浅比较与共享引用产生混乱。
SafeAreaProvider 与 SafeAreaView 提供安全区域信息;KeyboardAvoidingView 根据平台选择适配方式。布局还受设备、导航容器与键盘模式影响,本例只是起点,不能声称一种配置适配所有设备。
记录项用 checkbox 角色和 checked 状态表达完成情况,文本同时写“待学/已学”。这让状态不依赖颜色。错误区域支持可感知提示,列表为空时有明确文案。
运行与检查
在目标平台检查新增中文标题、空格输入、软键盘提交、反复切换待学筛选、较大系统字号和后台恢复。记录设备/系统/Expo SDK。若只有 Web 或模拟器结果,应标明验证范围,不填写未做的真机结论。
练习:添加编辑与删除,检查筛选后操作是否仍按 ID 找到正确记录。再加入持久化,分别处理初始化失败、旧格式与应用后台恢复;不要把保存请求直接塞进每一项的渲染函数。
进阶再接导航、查询缓存与原生插件。发布前准备应用标识、权限说明、签名和对应平台测试,这些不由一次 JavaScript 构建自动完成。