React Native：您如何处理使屏幕顶部的图形时间等难以看到的问题？

Posted 2023-04-18

【中文标题】React Native：您如何处理使屏幕顶部的图形时间等难以看到的问题？

【英文标题】：React Native: how do you deal with graphics making time etc at the top of the screen hard to see?

【发布时间】：2020-08-04 12:10:18

【问题描述】：

我的 React Native 应用程序的屏幕顶部有以下图形：

显然问题在于时间、电池电量等，因为图形是黑色的，所以很难看清。人们通常如何处理这种事情？如果我把它变成白色，如果特定手机上的时间等是白色的，我就会冒它不那么明显的风险。我应该只在屏幕顶部放置填充，以使图形不与文本重叠吗？

【问题讨论】：

使用 SafeAreaView

【参考方案1】：

如果您知道每页图形的颜色，并且页面数量有限，只需硬编码即可。 您可以使用https://reactnative.dev/docs/statusbar#setbarstyle 设置状态栏文本的颜色。在每个焦点页面上调用它以确保它是正确的。

如果图形是动态的，请使用https://github.com/iran-react-community/rn-dominant-color 获取主色。然后，您可以使用https://github.com/Qix-/color 来确定颜色是浅色还是深色，并通过StatusBar.setBarStyle API 进行相应的设置。

只是我的快速想法。