在 iOS 上带有 expo 的 React-native statusBar

Question

我试图更改我的反应本机应用程序上

statusBar

的颜色。

我正在与

expo

合作，在他们的文档中，他们只是指定添加：

"androidStatusBar": {
      "backgroundColor": "#2E1D59"
    }

这在 Android 上工作得很好，但他们没有提到如何在 iOS 状态栏上做到这一点。

有人对此有想法吗？

Answer 1

您无法更改 iOS 状态栏的颜色。

您可以使用 React Native StatusBar 模块将其隐藏，或将文本颜色设置为浅色（白色）或深色（黑色）。

您只需将该组件拖放到应用程序的根组件中即可：

 <StatusBar barStyle="light-content" /> 

Answer 2

您无法设置

StatusBar

本身的背景颜色，但您的组件可以填充该空间，并且您可以在组件上设置颜色。然后使用

StatusBar

组件告诉 iOS 更改文本颜色。

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { Appearance, View } from 'react-native';

export default function App() {
  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());

  useEffect(() => {
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      setColorScheme(colorScheme);
    });

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}>
      <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
      {/* Your app content */}
    </View>
  );
}