V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
toacnme
V2EX  ›  分享创造

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

  •  
  •   toacnme ·
    alantoa · 2022-03-27 15:16:55 +08:00 · 3900 次点击
    这是一个创建于 951 天前的主题,其中的信息可能已经有所发展或是发生改变。

    国内可能深入使用 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 支持一下。

    13 条回复    2022-03-28 15:58:46 +08:00
    cssk
        1
    cssk  
       2022-03-27 15:54:19 +08:00 via iPhone
    只能放系统播放器支持的格式吗?
    toacnme
        2
    toacnme  
    OP
       2022-03-27 15:59:26 +08:00
    @cssk 这个库只是在 react-native-video 基础上添加交互和控制。
    格式支持的话需要看 https://github.com/react-native-video/react-native-video 的原生支持情况,目前我使用来说,主流格式都是支持的 。
    但后面也考虑将播放器换成 expo-av 。
    huhalo
        3
    huhalo  
       2022-03-27 17:54:06 +08:00 via Android
    前几天 YouTube Vanced 的项目被叫停了
    toacnme
        4
    toacnme  
    OP
       2022-03-27 18:09:59 +08:00
    @huhalo 和这个无关,我只是用 RN 实现了 YouTube 播放器的交互、动画和控制而已。
    XTTX
        5
    XTTX  
       2022-03-27 20:08:29 +08:00
    @huhalo #3 怪不得我的 vanced 显示无法登录了。
    tf2017
        6
    tf2017  
       2022-03-27 23:05:54 +08:00
    RN 还是不错的,就是有些功能比较依赖社区库,而社区库的质量又参差不齐的。

    我刚基于 RN 开发了一个听播客的应用: https://www.v2ex.com/t/843258#reply0

    这种跨平台的方案确实效率高。
    toacnme
        7
    toacnme  
    OP
       2022-03-27 23:18:12 +08:00
    @tf2017 是的,但是组件等功能这东西最终还是要靠社区的,Meta 也不可能什么组件都写好,质量参差不齐主要还是因为不维护的原因,看一下更新日期或者依赖文件基本都能辨别清楚。
    主要还是国内大部分公司和开发人员对 RN 认知和使用还是停留在 0.60 以前,相关的资料很文档很少,再加上初期的 RN 确实很多方面有问题,给很多人留下了不好的印象,但是在后来都有改进或解决。
    buddie
        8
    buddie  
       2022-03-28 07:44:38 +08:00 via iPhone
    expo 项目能直接用吗
    toacnme
        9
    toacnme  
    OP
       2022-03-28 10:45:24 +08:00
    @buddie 可以,但是目前来说 video 使用的是 react-native-video, 但是建议等我换成 expo-av 再使用,expo-av 性能等各方面比 react-native-video 更好
    wobuhuicode
        10
    wobuhuicode  
       2022-03-28 13:50:32 +08:00 via iPhone
    rn 开发的应用优化起来太麻烦了,对国内安卓不友好。我在海外的项目能用 rn 都会用。但是国内就不敢用
    toacnme
        11
    toacnme  
    OP
       2022-03-28 14:19:54 +08:00
    @wobuhuicode
    国内不敢用不是很理解,国内和国外安卓的可能主要的棘手问题是推送这一块,其它好像也没啥区别,即使是海外项目也少不了要适配小米、华为、三星、OV 等机型。
    优化这东西其实熟练了都还好,比如 zIndex 只能用于 iOS ,不适用于安卓,安卓很多在处理 SafeArea 要加上 StatusBar 的高度,经验多了这些都能避免。
    wobuhuicode
        12
    wobuhuicode  
       2022-03-28 14:56:30 +08:00 via iPhone
    @toacnme 你说的那是适配。优化的比如说动画流畅度,app 启动时间,app 大小之类的。初起步的 app 可以不考虑这些,后面随着业务增大,这些都成了优化点。
    toacnme
        13
    toacnme  
    OP
       2022-03-28 15:58:46 +08:00
    @wobuhuicode 了解,主要还是国内很多公司 Apk 的模式,一个 App 用着用着就变成了超级应用,什么都往里面塞,这样用 RN 或者 Flutter 都太合适,有这样的资本也不太需要跨平台。
    但是就目前来说动画方面使用 reanimated 可以基本解决,如果特别复杂的动画或交互可以等 react-native-skia 的正式版发布,可以解决这个问题,启动时间和 apk size 如果开启 hermes 的话会好很多,但跨平台始终是跨平台,所有性能、优化等方面肯定不如原生,只能有所取舍。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   926 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:23 · PVG 05:23 · LAX 14:23 · JFK 17:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.