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

Question

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

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

Answer 1

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

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

只是我的快速想法。