react-native做动画时的一些填坑总结

涂泰平
2023-12-01

1. 强烈建议使用react-native-reanimated动画库

在做动画时,发现使用react-native库中的animated,部分属性是不支持原生驱动的,比如width/height等

2. 动画执行时不要使用setState

会造成动画的延迟或卡顿,目前猜测是因为两者在不同的线程执行导致,若非要setState更新什么内容,建议将state值转化为动画,通过更新动画来更新UI

3. for循环处理动画时,动画不会同时执行

之前认为for循环执行的很快,动画有个毫秒级别的延迟没啥影响,但在实际开发中发现两个问题:

  1. 两次for循环的动画时间差还是挺大的,能明显感知到
  2. 最后一次循环里的动画会先执行

处理办法就是把最影响用户的那个动画放到for循环的最后面

4. 手势使用react-native-gesture-handler手势库

RN官方提供的PanResponder部分操作是在JS线程操作的,繁忙时会有性能问题,而react-native-gesture-handler都是在UI线程操作的,性能较好,该手势库和react-native-reanimated动画库搭配更爽。

 类似资料: