我在 BottomTabNavigator 中使用 StatusBar 不起作用

Question

在BottomTabNavigator中切换标签后，状态栏无法更新

https://snack.expo.dev/@bbbtt04/my-use-of-statusbar-in-bottomtabnavigator-did-not-work

这是跑世博的例子，请大佬帮忙，我真的很不爽

在 BottomTabNavigator 中切换选项卡后，状态栏需要更新

Answer 1

StatusBar 仅在渲染时更新。

因此，每当您在选项卡之间切换时，您都需要重新渲染 StatusBar 以使背景颜色得到更新。

您可以使用

useIsFocused

钩子来完成此操作。

import { useIsFocused } from '@react-navigation/native';

function HomeScreen() {
  const isFocused = useIsFocused();

return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {isFocused ? <StatusBar backgroundColor={'white'} /> : null}
      <Text>Home!</Text>
    </View>
  );
}

SettingsScreen() 中也会进行相同的处理。

基本上，只要您选择的选项卡处于焦点状态，这就会重新渲染您的状态栏。您可以从 here 阅读有关 useIsFocused() 的更多信息。