React native (expo) 每个页面都有不同的导航栏颜色（Android）

Question

Android 具有导航栏的手机，如 iPhone，默认背景颜色为白色，如果我的屏幕背景颜色不同于白色，这看起来真的很糟糕，所以我需要根据我的屏幕背景颜色更改背景颜色。

目前我正在使用 expo 来在屏幕组件加载时更改该颜色，但是当我导航回上一个屏幕时这不起作用。

这是我所有屏幕中的内容（只是颜色不同以匹配我的背景）

  useEffect(() => {
    if (Platform.OS === 'android') {
      NavigationBar.setBackgroundColorAsync(colors.main);
    }
  }, []);

当我导航回已加载的屏幕时，如何实现运行？或者还有什么方法可以解决我的问题？

Answer 1

您应该可以通过从 React-Native 导入 StatusBar 来实现此目的；

import { StatusBar } from 'react-native';

const HomeScreen = ({ navigation }) => {
StatusBar.setBackgroundColor(primary_color)
return (
...
)}

或者您可以在 return 函数中这样设置；

return (
<SafeAreaView style={styles.container}>
  <StatusBar
    animated={true}
    backgroundColor="red"
    barStyle={statusBarStyle}
    showHideTransition={statusBarTransition}
    hidden={hidden} />
    ...

参考：https://reactnative.dev/docs/statusbar

Answer 2

我最后做的是使用 @react-navigation/native 中的 useIsFocused 来判断用户何时返回屏幕，然后再次调用 NavigationBar.setBackgroundColorAsync

React native (expo) 每个页面都有不同的导航栏颜色（Android）

React native (expo) have a different navigation bar color for each page (on Android)

react-native

expo