react-native statusBar with expo on iOS

wn9m85ua  于 2023-08-07  发布在  React
关注(0)|答案(2)|浏览(159)

我试图在我的react-native应用程序上更改statusBar的颜色。
我正在使用expo,在他们的文档中,他们只是指定添加:"androidStatusBar": { "backgroundColor": "#2E1D59" }
这在Android上运行得很好,但他们没有提到如何在iOS StatusBar上这样做。
有人有主意吗?

tkqqtvp1

tkqqtvp11#

您无法更改iOS状态栏的颜色。
您可以使用React Native StatusBar模块隐藏它,或将文本颜色设置为浅色(白色)或深色(黑色)。
您可以直接将组件放到应用的根组件中:

<StatusBar barStyle="light-content" />

字符串

wpx232ag

wpx232ag2#

您不能设置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>
  );
}

字符串

相关问题