Android TV跨平台开发心得

这半年来陆陆续续做了一堆poc，刚开始是flutter，结果领导叫停了，说有其他部门做一样的事，真不巧；后来是react native，开发了个demo，上报上去了已经；现在又要做android native+webview PWA，也做的差不多了。一直忙到现在，终于喘口气。前两天领导让我出一个flutter培训，惊奇的发现，才放下不久的flutter已经忘的差不多了，估计react native也快了，再不总结一下，半年就白干了

纯主观感受，没有一点客观

Flutter最大的一个特点就是它的skia引擎，让给我的感觉就像一块画布，skia在上面画，这个画布不管铺到ios，安卓，还是什么其他的（据说还能用来开发桌面端和web，真的有人这么干吗），都是一样的，带来相同的体验

React Native的是用的原生的组件，不过我觉得吧，一个view，你width height设置好了，bgcolor shadow全填了，那还能显示的不一样？不过确实，针对不同平台不同写法的情况是有的，比如<video>，react-native-video，一堆选项ios专用，这就是由于底层安卓用的是exoplayer，ios用的avplayer，exoplayer和avplayer的feature不同导致的。但是这个，flutter的video就没有吗，也不见得吧，flutter 也是 embad 到这俩player的

然后flutter还有一个，就是它的引擎，巨大无比，装在apk包里，apk包巨大，装在tpk包里，tpk包巨大。这个其实要是装app还好，装得上去就行，但如果是想做web页面，这个首屏加载速度简直感人，给大家放一个flutter demo感受一下：
https://flutter.github.io/samples/web/material_3_demo/

所以我觉得总体上Flutter好像相对React Native没看出什么特别的优势，而且它是dart写的，很多人一看到dart就害怕了，要新学，就算了

dart其实不难，有点像java，就是很面向对象，还有关键字啥的。反正我当时学会了StatelessWidget和StatefulWidget就上手写了，不会的现查，也写的挺顺利的

倒是开发react native，js，老本行啊，我当时可有信心了，感觉这不是容易的很，但是，奉劝大家，手里已经有一个写好的react项目的，千万不要觉得迁移到react native非常方便！一点都不方便！不止是div要换成View的问题，webapp用的那些包，什么sass，className，都要找react native版本的替代，能替代的，配置配一个下午，替代不了的，等着重写吧，比如关于页面跳转的，web和android app的逻辑都不一样，只能用react navigator重写

还有样式，没想到样式表从scss拉过来放到js里面这么长，这怎么不算一种css-in-js呢（x），甚至还不支持嵌套！这一个从json create的StyleSheet，不支持这个json嵌套！还有那个动画，只能说幸好我写过flutter，有一点底子，要不然直接从css动画过渡过去，肯定满脸懵，其他的关于一些细微的差别，比如flex-direction默认竟然是column，还有z-Index要用elevation代替，这些就不说了，总之不是直接把css搬过去可以解决的

可能是开发用的电视棒的比较低端，同样的代码，在webapp里很快，开发react的时候也很少useMemo啥的，react native可好了，响应速度感人，没做优化前四五百毫秒都是有的，优化后200ms以内，喜欢顺手写onFocus={() => {setFocus(true); focusCb();}}的人有难了，必须提出来用useCallback包一下，要不然这个cb对象会重新生成，它生成不要紧，下面的依赖这个cb的所有子元素也都要重新生成。。。

关于焦点管理，不知道大家的习惯是啥样的，开发react tv app的时候我习惯是全局监听一次遥控器按键，然后分发到不同的组件，这也是符合直觉的，只有一个事件源，发送到电视这唯一的接收方，然后电视内部在如何如何决定怎么画页面。不过react-native-tvos采用的是TVFocusGuide，它的意思类似于，如果我正在focus，那按上下左右时，下一个focus的是啥，然后这个找下一个focus。这个过程是帮我们托管的，往水平垂直方向上找，找到最近的下一个。这个很像手机的操作逻辑，手机只要一点能任意点到任何一个元素，所以手机是和所有元素交互的，所有元素都是事件的接收方，这样每个元素都来管理自己，很正常。这种我不评价，习惯了也挺好的，只要这个系统做的好，没出什么问题，那对从手机端转过来的开发者很友好，只是说在TV webapp的迁移上，焦点管理要重新写，因为TVFocusGuide是写在所有基础组件内部的！不重构的话，你的list就会同时受两套焦点系统管制，滑动时形成很有艺术感的抖动