用 React Native 写了一个高性能 (60+ fps) 的 Youtube 播放器应用

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1318 天前的主题，其中的信息可能已经有所发展或是发生改变。

国内可能深入使用 RN 跨平台的比较少，但是 RN 在国外的热度一直很🔥 ，自己本来开源了一个 Slider & Player组件，最近将两个组合在一起仿写了一个 Youtube 应用。

技术栈：

动画使用了 react-native-reanimated （保证了动画的性能）
手势使用了 react-native-gesture-handler （保证了手势之间不会互相影响）
ICON 和 ICON 变化动画分别使用了 Svg 和 Lottie

Twitter 视频预览地址： https://twitter.com/alan_toa/status/1507732889181786118

Github 项目地址： https://github.com/alantoa/react-native-awesome-slider/tree/main/example

（相关文档和说明还没来及更新）

发在 Twitter 上反馈不错，在这里分享一下，觉得不错的可以点个 Star 支持一下。

动画

icon

Twitter

手势

13 条回复 • 2022-03-28 15:58:46 +08:00

cssk

2022-03-27 15:54:19 +08:00 via iPhone

只能放系统播放器支持的格式吗？

toacnme

2022-03-27 15:59:26 +08:00

@cssk 这个库只是在 react-native-video 基础上添加交互和控制。
格式支持的话需要看 https://github.com/react-native-video/react-native-video 的原生支持情况，目前我使用来说，主流格式都是支持的。
但后面也考虑将播放器换成 expo-av 。

huhalo

2022-03-27 17:54:06 +08:00 via Android

前几天 YouTube Vanced 的项目被叫停了

toacnme

2022-03-27 18:09:59 +08:00

@huhalo 和这个无关，我只是用 RN 实现了 YouTube 播放器的交互、动画和控制而已。

XTTX

2022-03-27 20:08:29 +08:00

@huhalo #3 怪不得我的 vanced 显示无法登录了。

tf2017

2022-03-27 23:05:54 +08:00

RN 还是不错的，就是有些功能比较依赖社区库，而社区库的质量又参差不齐的。

我刚基于 RN 开发了一个听播客的应用： https://ex.noerr.eu.org/t/843258#reply0

这种跨平台的方案确实效率高。

toacnme

2022-03-27 23:18:12 +08:00

@tf2017 是的，但是组件等功能这东西最终还是要靠社区的，Meta 也不可能什么组件都写好，质量参差不齐主要还是因为不维护的原因，看一下更新日期或者依赖文件基本都能辨别清楚。
主要还是国内大部分公司和开发人员对 RN 认知和使用还是停留在 0.60 以前，相关的资料很文档很少，再加上初期的 RN 确实很多方面有问题，给很多人留下了不好的印象，但是在后来都有改进或解决。

buddie

2022-03-28 07:44:38 +08:00 via iPhone

expo 项目能直接用吗

toacnme

2022-03-28 10:45:24 +08:00

@buddie 可以，但是目前来说 video 使用的是 react-native-video, 但是建议等我换成 expo-av 再使用，expo-av 性能等各方面比 react-native-video 更好

wobuhuicode

2022-03-28 13:50:32 +08:00 via iPhone

rn 开发的应用优化起来太麻烦了，对国内安卓不友好。我在海外的项目能用 rn 都会用。但是国内就不敢用

toacnme

2022-03-28 14:19:54 +08:00

@wobuhuicode
国内不敢用不是很理解，国内和国外安卓的可能主要的棘手问题是推送这一块，其它好像也没啥区别，即使是海外项目也少不了要适配小米、华为、三星、OV 等机型。
优化这东西其实熟练了都还好，比如 zIndex 只能用于 iOS ，不适用于安卓，安卓很多在处理 SafeArea 要加上 StatusBar 的高度，经验多了这些都能避免。

wobuhuicode

2022-03-28 14:56:30 +08:00 via iPhone

@toacnme 你说的那是适配。优化的比如说动画流畅度，app 启动时间，app 大小之类的。初起步的 app 可以不考虑这些，后面随着业务增大，这些都成了优化点。

toacnme

2022-03-28 15:58:46 +08:00

@wobuhuicode 了解，主要还是国内很多公司 Apk 的模式，一个 App 用着用着就变成了超级应用，什么都往里面塞，这样用 RN 或者 Flutter 都太合适，有这样的资本也不太需要跨平台。
但是就目前来说动画方面使用 reanimated 可以基本解决，如果特别复杂的动画或交互可以等 react-native-skia 的正式版发布，可以解决这个问题，启动时间和 apk size 如果开启 hermes 的话会好很多，但跨平台始终是跨平台，所有性能、优化等方面肯定不如原生，只能有所取舍。