halo，大家好，我是 132，今天给大家带来的是一篇有关于 c 站 app 的重构总结

背景

由于旧版c站 app 用户量太多，apicloud 平台要求上传企业认证，否则将无法更新 app

这波操作简直了……我们 app 的核心开发人员 @飘香豆腐和我，都……是学生::>_<::

所以……旧版 app 陷入停更

同时，由于年代久远，c站的发展，也导致我们需要思考 app 的重构

技术选型

在写 app 之前，我们思考过使用的技术，主要是 flutter 和 react native

除了两者都能满足大部分业务场景外，两者都有缺点：

flutter 不支持 m3u8，而且没有一个靠谱的视频播放器
react native 在安卓下面，打包体积大

同时，两者最近更新：

react native 60.2 装载 hermes
flutter 发布 1.12，dart 发布 2.7，性能有提高

以上，是我平时做技术选型的两个方面：缺陷和大更新

综合来说，由于这次重构比较急，加上 flutter 对 m3u8 的支持有限，然后我对 hermes 的表现更感兴趣，然后使用 hooks 还可以复用 c站主站大部分代码

所以这次重构选择了 RN

p.s. 写完后有一点点后悔没有选 flutter，哈哈

开始

确定了技术选型，就直接开工了，以下几个方面：

设计

上个图，直观感受下，首先使用了我们的主题色——基佬紫，然后整个设计遵循的是大道至简，没有边框，没有过多的图标和样式，这也是我一直以来的风格

由于是我自己设计，所以很大程度上考虑到 RN 组件和代码实现，所以接下来的代码工作非常顺利

react navigation 5.x

有个大坑，因为很久没有用 RN 了，以前的 navigator 竟然弃用了，推荐使用 react navigation

这玩意贼坑，官方文档是 4.x，但是当我搜索文档时，出来的结果是 4 5 都有的

所以我用 4 写完了，因为一个返回键的监听问题，只有 5 才支持，导致我不得不把所有逻辑重写

所以啊，大家做开源，不要将不同的两个版本混着来好吗

几个点：

隐藏播放页的 tab，通过 options 判断 state

<Tab.Screen name='Home' component={HomeScreen} options={({ route }) => {
  return { tabBarVisible: route.state && route.state.index > 0 ? false : true }
}} />

后退刷新视图,通过监听 focus 事件

navigation.addListener('focus', () => setState())

expo

由于我是 windows 电脑，不怎么友好，所以为了方便，我使用了 expo

这也是这次最错误的选择，因为打包体积太大了呜呜呜

在这里不多说了，expo 真的很方便，连上模拟器直接就可以用

播放器

作为一家视频网站，播放器真的是重中之重

为此，我简单写了个播放器组件，代码量小，性能好

https://github.com/yisar/oplayer

大概长这样……

当然，这只是权宜之计，未来播放器的定制需求会更高，目前有一个问题没有解决，就是全屏隐藏虚拟按键，唉

争取从底层重写
全屏状态下，隐藏虚拟按键
未来 RN 核心会移除 Slider 等众多组件，播放器可能重写

业务代码

由于是全部重写，所以业务代码也没有历史包袱

全部使用 react hooks

是的你没看错，这也是我选择 RN 的一个原因，因为它可以复用 40% 主站的代码，主站是 fre 写的

使用最新技术

唔，经过一两年的发展，现在的技术栈多多少少都有了变化，比如有了 fetch 就再也不需要 axios

未解决的问题

打包尺寸太大

由于 RN 自带 jscore 和 expo 的 sdk，导致打包默认就会很大，这个可能需要等 RN 精简核心才会有改善

无法在全屏状态下隐藏虚拟按键

RN 默认使用 StatusBar 来控制状态栏，但是并没有组件去控制虚拟按键栏，这太令人绝望了

如果你知道方法，请告诉我，十分感谢！

总结

经过这一次重构，c站的 app 终于更换为最新技术栈的架构，app 的终于可以恢复迭代了

但是比较遗憾的是，hermes 没有用到，未来我会花一些时间来研究它

后悔

说一点点后悔的事情，就是没有选择 flutter

因为整个重构下来，感觉全部工作都在我的【舒适区】，就是即便很久没写 RN，也没遇到什么大坑，整个重构很顺利

这也导致了没什么突破和产出

现在有点后悔没有用 flutter，说不定逼一下自己，我还能写个播放器什么的

不过来日方长，没有哪个 app 是不需要重构的

下次重构可能就毅然抛弃 RN 啦，哈哈哈哈

开源

c站所有代码开源，开源地址：https://github.com/cliclitv

RN 项目开源地址：https://github.com/cliclitv/ClicliPure

flutter 项目开源地址（@江河）：https://github.com/cliclitv/clicli-dark

旧版本开源地址（@豆腐）：https://github.com/cliclitv/clicli-hybrid-app

欢迎 star 与 pr 呀！

最后放个二维码

最新更新

移除 expo

因为打包文件太大了，移除前 49 M，移除后 10 M，同时开启了 hermes

但是插件啥的全都重写了一遍，呜呜呜