Android设备在 10 之后提供了对于暗黑模式的支持, iOS也在 iOS13之后提供了同样的支持。React Native 在 0.62 版本中增加了对于暗黑模式功能的支持,用来提升App用户体验。暗黑模式在 0.62 之前及 0.62+的版本如何适配呢?本文就来详细说明在RN环境下暗黑模式的适配实践方案。
暗黑模式是基于Native端实现。如何在RN端进行功能实施呢?核心实现是:通过直接获取和动态监听两种方式获取 Native 端的主题变化即可。
1)从 Native 端获取当前的 theme 值
使用 Native Modules 的同步方法在 JS 端获取当前 theme 值,JS 端方法调用能直接得到 Native 同步方法的返回值,而非一个 Promise。
iOS: 使用 RCTEXPORTSYNCHRONOUSTYPEDMETHOD() 替换 RCTEXPORTMETHOD()(v0.51.0 及以上版本支持Commit)
Android: 在 @ReactMethod annotation 后面添加 (isBlockingSynchronousMethod = true) (v0.42.0 及以上版本支持Commit)
同步方法的缺点是无法在 Debug Remotely 时调用,所以必须在 Debug Remotely 时,提供默认值。
2)theme 值变化监听
RN事件监听Theme变化可以使用系统提供的EventEm