logo标签列表

如何在React Native中设置iOS状态栏的背景颜色？

iosreact-nativeios7-statusbar
108
有没有一种方法可以获取任务栏的源代码，以便拥有这些按钮（菜单、搜索等）？谢谢 - AlainIb
https://github.com/oblador/react-native-vector-icons 包含了 https://material.io/icons/ 上所有的 Google Material Design 图标，以及许多其他图标，您可以在这里浏览：https://oblador.github.io/react-native-vector-icons/。 - Ed of the Mountain
14个回答
282

iOS没有状态栏背景的概念。以下是如何以跨平台的方式实现此目标:

import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  StatusBar,
  Platform,
  SafeAreaView
} from 'react-native';

const MyStatusBar = ({backgroundColor, ...props}) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <SafeAreaView>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </SafeAreaView>
  </View>
);

class DarkTheme extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" />
        <View style={styles.appBar} />
        <View style={styles.content} />
      </View>
    );
  }
}

const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
  appBar: {
    backgroundColor:'#79B45D',
    height: APPBAR_HEIGHT,
  },
  content: {
    flex: 1,
    backgroundColor: '#33373B',
  },
});

AppRegistry.registerComponent('App', () => DarkTheme);

模拟器

也许代码中并不清楚，但窍门在于使用StatusBar，它适用于Android，并为IOS创建一个“假”的状态栏（一个具有backgroundColor的View）。

18
哇！我刚在Android和iOS上进行了测试，完美！这是一个非常优秀的跨平台解决方案，开箱即用！非常感谢你抽出时间来发布这个。我相信这将有助于许多开发人员。 - Ed of the Mountain
2
这只有在你的内容不高于屏幕尺寸时才有效吧？如果你必须滚动状态栏，背景就会被隐藏。 - SomethingOn
1
@sowmya 更新了解决方案，以支持更高版本的Android。 - jmurzy
@jmurzy 不确定为什么我的状态栏有渐变背景色...你知道如何去掉吗？我希望它像你的示例那样，扁平化... - ComeRun
3
这是一个很好的解决方案，但如何在有刘海的iPhone上实现？ - sanjeev shetty
显示剩余7条评论
75
将 import { StatusBar } from 'react-native'; 添加到你的 app.js 顶部，然后将 StatusBar.setBarStyle('light-content', true); 添加为你的 render() 函数中的第一行，以将状态栏文本/图标更改为白色。其他颜色选项包括 'default' 和 'dark-content'。有关详细信息，请参阅https://facebook.github.io/react-native/docs/statusbar.html。除此之外：不，你需要按照提供的链接进行操作。
理想情况下，应该在哪里调用StatusBar.setBarStyle()？我尝试将其放在render()和我的根组件的componentWillMount中，但它会导致Xcode崩溃...是否有其他适合放置此调用的位置？谢谢！ - Evan K. Stone
好的 - 我想我可能已经解决了它。我没有提到另外两个问题：1）我正在使用带有StatusBar的NavigatorIOS（我看到的大多数示例都使用通用Navigator），2）我正在使用Release配置在设备上进行测试。所以...为了解决这个问题，我将调用从根组件中移出，并将其移到NavigatorIOS的initialRoute使用的组件中（我们称之为ToDoList）。在ToDoList的componentDidMount中，我添加了对StatusBar.setBarStyle('light-content', false)的调用，然后它就起作用了！ - Evan K. Stone
在不使用render()的功能组件中，将其放置在您的App()函数中。如果您的应用程序很轻，并且想要在状态栏中使用深色文本，请使用{'dark-content', true}。 - Raphael Pinel
15
10
这对我来说很有效果，需要使用react-native-safe-area-context版本3.3.2。
import { StatusBar } from "react-native"
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"

const App = () => {

  const theme = ... get your theme

  return (
    <>
      <StatusBar
        backgroundColor={theme === "light" ? "#fff" : "#000"}
        barStyle={theme === "light" ? "dark-content" : "light-content"}
      />
      <SafeAreaProvider>
        <SafeAreaView
          style={{
            flex: 1,
            backgroundColor: theme === "light" ? "#fff" : "#000",
          }}
        >  

          // stuff goes here

        </SafeAreaView>
      </SafeAreaProvider>
    </>
  )
}
1
这应该是被接受的答案。直截了当，没有自定义组件。 - Nate
这个“方法”确实有效，但是对我来说移除状态栏没有任何影响。它只是在iPad mini第六代上绘制了SafeAreaView。 - undefined
7

在React Native中设置iOS和Android状态栏的背景颜色

    import React, { Component } from 'react';
    import { Platform, StyleSheet, View, StatusBar } from 'react-native';
    import Constants from 'expo-constants';


    class Statusbar extends Component {

        render() {
            return (
                <View style={styles.StatusBar}>
                    <StatusBar translucent barStyle="light-content" />
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        StatusBar: {
            height: Constants.statusBarHeight,
            backgroundColor: 'rgba(22,7,92,1)'
        }
    });

    export default Statusbar;
5
如果你正在使用 react-native-navigation，你需要：
1-) 将以下内容添加到你的 info.plist 文件中：
<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>

2-) 在你的render()函数的第一行，例如：

  render(){
    this.props.navigator.setStyle({
      statusBarTextColorScheme: 'light'
    });
    return (
      <Login navigator={this.props.navigator}></Login>
    );
  }

这个例子将把你的状态栏转变为浅色文本/按钮/图标颜色。 在这里输入图片描述

1
你发布的代码只是将状态栏文本主题设置为亮色。你是如何实现与内容相同的背景的？ - Ash
@Ash 我认为如果标题栏的背景是红色，状态栏会自动变成红色，因为标题栏会位于状态栏后面。 - cristian camilo cedeño gallego
1
ExceptionsManager.js:179 RCTStatusBarManager 模块要求在 Info.plist 中将 UIViewControllerBasedStatusBarAppearance 键设置为 NO。 - glinda93
4
将视图添加到根视图中（如果有，则在 SafeAreaView 之外）。
{Platform.OS === 'ios' &&
 <View style={{
     width: "100%",
     height: 100, // For all devices, even X, XS Max
     position: 'absolute',
     top: 0,
     left: 0,
     backgroundColor: "red"}}
/>}
// App screen
...
1

请务必使用padding而不是margin。以下是我的代码，它在iOS上运行良好：

import { SafeAreaView } from 'react-native'
import { StatusBar } from 'expo-status-bar'
// ...
// ...
return <SafeAreaView style={{ paddingTop: height }}>
  {/* your content here */}
  <StatusBar style="light" />
</SafeAreaView>
0

你只需要使用SafeAreaView元素，但在标题后立即关闭它，并额外将页面包裹在一个简单的View元素中。这样你就可以只设置SafeAreaView的背景颜色，从而得到所期望的结果。

这个回答与其他回答重复了，其他用户已经比你更详细地讨论了SafeAreaView。除非你有新的内容可以贡献，否则请不要发表回答。你可以通过点赞来支持原始回答。 - Ben A.
0
import {SafeAreaConsumer} from 'react-native-safe-area-context';

<SafeAreaConsumer>
{(insets)=>(
<View style={{flex:1}}>
<View style={{height:insets.top ,backgroundColor :"black"}}/>
<StatusBar barStyle="light-content"/>
<View style={{flex:1}}>
  <Text>My Text</Text>
</View>
</View>
)}
</SafeAreaConsumer>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接