基于 ignite 的 RN 脚手架开发的韩日剧 APP

页面

1. 韩剧列表
2. 日剧列表
3. 历史记录
4. 搜索页面
5. 播放页面(包含详情)

路由

1 + 2 = BottomTabsNavigator.tsx

BottomTabsNavigator + 3(drawerContent) = DrawerNavigator.tsx

DrawerNavgator + 4 + 5 = StackNavigator.tsx

组件

1 和 2 主体都是由一个列表组件组成

色彩主题

查看 my-theme 目录下的 color.ts

问题

1. useSafeAreaInsets 返回的 bottom 是一个变化值, 导致使用了 bottom 的组件在第一次渲染时会抖动

2. 安卓在返回桌面再打开 APP 时, StatusBar 的 translucent 会失效, 去安卓目录下的 styles.xml 给 statusbar 加上背景色可以解决

3. transform scale(0) 时, 虽然在视图上消失, 但是触摸事件仍会触发, 可以通过向父元素添加 scale(0) 来解决.

4. 资源参考了另外一个 RN 项目 XiFan. 但是资源发生了变化, a 标签的 onClick 中存放的是 m3u8 的链接, 而且有可能是嵌套的链接(第一个链接下载的文件打开后是另外一个 m3u8 链接, 这个连接才是真正的播放 url). 所以需要先请求第一个个链接获取第二个链接再赋值给播放器(通过观察推测第二个链接就是在第一个链接的 index.m3u8 前面添加 1000kb/hls/).通过测试不需要二次请求获取第二个链接,比较容易播放的是包含 iqiyi,letv,vod.bunediy的url.在获取播放列表的时候筛选一下.

5. 使用 hooks 来写手势时, 发现创建的 panResponder 无法获取到最新的 state, 永远都是初始值. 这是因为 useRef 传入一个初始值, 返回一个贯穿整个生命周期的对象. 当 state 改变时, 它并不会一起更新, 所以 panResponder 里拿到的永远都是初始值.解决方案是每次更新 state, 就创建新的 panResponder 或者使用 class 组件. 链接

6. 手势的 onPress 会触发 onMove, 是因为 onPress 由手指接触屏幕和离开屏幕组成, 而手指接触屏幕时会发生小量的偏移,所以需要定义 dx 大于多少才触发 onMove

7. useWindowDimensions 返回的高度比实际的要小,大概率和设备 DPR 有关系.

8. 搜索是 post 请求传递 formdata.

{
  keyboard: ""    //input输入的值
  show: "title,keyboard"
  tempid: "1",
  tbname: "news"
}

9. 手机时间不明原因变成了好几年之前,导致无法访问 https 网络.

10. 写进度条手势的时候发现,当父元素的尺寸足够小时(小于 10), 无论子元素尺寸多大都很难触发手势.这说明了父元素的尺寸会限制子元素的事件响应区域,尺寸过小会影响事件的响应.

11. simplePlayer 设计的时候 state 不是由外部传递的,而是由内部自行处理. 当选中了集数后,只有等待 uri 替换了才能重新显示状态.所以使用 forwardRef 和 useImperativeHandle 将 setPlayState 的方法暴露给父组件.(因为函数组件没有实例, 不能直接使用 ref)(已经重写成 expo-player，不再向外暴露ref).

12. 如果资源域名变化了, 搜索结果并不会重定向返回而是直接是无法搜到了.

13. 侵入状态栏的部分如果有交互事件的话不会触发(播放器的head)

14. mobx-state-tree 的组件必须经过 observer 包裹才能响应数据变化, 但是组件内部的子组件不一定会变化. 比如 FlatList, 虽然父组件重新 render, 但是接收到的 data 是 immutation, 所以并不会重新 render. 如果需要重新渲染, 那么不能提供 store 里的数据, 而是要使用 mobx-state-tree 提供的 getSnapshot 方法转一遍 data.(主要发生在引用类型的数据上).store 里的数据应该都是 immutation, 从 store 获取的渲染数据类型都应该是 snapshot 类型.

15. 安卓和苹果 release 默认不支持 http 请求, 需要额外设置.(老是忘记)

16. FlatList 在 Bottom路由第一个页面的时候, 不明原因不会显示第一次的 refresh 的指示器.解决办法: 设置 refreshing 初始值 false, 在 useEffect 中使用 requestFrame 执行 setRefreshing(true).

17. LayoutAnimation 在 ios 中不会随着组件销毁而销毁, 直到下一次布局改变才执行.

18. 在安卓里, PanGestureHandler 不能在 Modal 中响应. github 上通知已经修复,预计下个版本推出.链接

19. react-native-gesture-handler 手势必须直接包裹动画组件.

20. reanimated 提供的 hooks 都是执行在 UI 线程, 可以获取到当前组件内的基础变量, 但是如果执行一个没有 worklet 关键字的js函数会闪退.

21. 在移动手势中执行一个计算边界的函数, 按照文档加上 worklet 关键字, 使用 runOnUI 转换一个可以在 UI 线程执行函数. 但是仍然闪退了. 推测: runOnUI 指的是创建一个在 JS 触发, 在 UI 中执行的函数 runOnJS 指的是创建一个在 UI 触发, 在 JS 中执行的函数 所以失败错误可能是因为在移动手势中, 做边界逻辑, 相当于我需要一个在 UI 中触发且在 UI 中执行函数

22. useDerivedValue 可以理解成 computed 值.但是在 active 中修改了依赖值后取到的永远是初始值, 只有在下一次 active 或其他事件中才能获取到正确的值.

23. 即使嵌套,每个手势只能获取到自己的上下文

24. 嵌套之后, 内部 start -> 外部 start -> 内部 active -> 外部 active -> 外部 end -> 内部 end.

25. pinch 做缩小手势会触发 tapend, 修改 maxDist = 4 避免触发.