# dodo

**Repository Path**: bjxbkb/dodo

## Basic Information

- **Project Name**: dodo
- **Description**: react-native ignite 脚手架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-27
- **Last Updated**: 2023-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于 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](https://github.com/helengray/XiFan). 但是资源发生了变化, a 标签的 onClick 中存放的是 [m3u8](https://blog.csdn.net/liujiayu2/article/details/86083400) 的链接, ~~而且有可能是嵌套的链接(第一个链接下载的文件打开后是另外一个 m3u8 链接, 这个连接才是真正的播放 url). 所以需要先请求第一个个链接获取第二个链接再赋值给播放器(通过观察推测第二个链接就是在第一个链接的 index.m3u8 前面添加 1000kb/hls/)~~.通过测试不需要二次请求获取第二个链接,比较容易播放的是包含 iqiyi,letv,vod.bunediy的url.在获取播放列表的时候筛选一下.

5. 使用 hooks 来写手势时, 发现创建的 panResponder 无法获取到最新的 state, 永远都是初始值. 这是因为 useRef 传入一个初始值, 返回一个贯穿整个生命周期的对象. 当 state 改变时, 它并不会一起更新, 所以 panResponder 里拿到的永远都是初始值.解决方案是每次更新 state, 就创建新的 panResponder 或者使用 class 组件. [链接](https://stackoverflow.com/questions/61014169/react-natives-panresponder-has-stale-value-from-usestate)

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 上通知已经修复,预计下个版本推出.[链接](https://github.com/software-mansion/react-native-gesture-handler/pull/1603)

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 避免触发.