React Native IOS状态栏背景

Question

React Native IOS状态栏背景

8

在iOS设备上，将backgroundColor属性应用于StatusBar组件不会生效。因此，我需要设置SafeAreaView的背景颜色来实现想要的效果，这种方法在大部分情况下都能正常工作。但是，在iPhone X上，屏幕底部会出现相同的颜色。如何解决这个问题？

- Basil Satti

4个回答

2

支持iPhone X

除了@sdkcy的回答外，对于，STATUS_BAR_HEIGHT不能为20。

我通过安装以下库来解决这个问题：

https://www.npmjs.com/package/react-native-status-bar-height

安装

npm install --save react-native-status-bar-height

导入

import { getStatusBarHeight } from 'react-native-status-bar-height';

然后像这样更新STATUS_BAR_HEIGHT：

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? getStatusBarHeight() : 0;

最后，我还将安卓设备的高度更改为0，因为这会影响NavigationBar的高度，但如果您认为这个高度对您来说合适，可以不做改变。

希望这能帮到您。

- Victor Pacheo

0

iPhone X使用44pt高的状态栏

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 44 : StatusBar.currentHeight;

参考这些速查表

- Bonface Mudiri

0

iOS不像Android那样支持React-Native中的StatusBar组件。在iOS中，实现SafeAreaView组件会在某种程度上降低视图高度，使其与原始状态栏不一致。我搜索了许多解决方案，大多数都建议使用自定义组件或使用库。下面是我想到的一个快速解决方案，它完美地解决了问题。在SafeAreaView之前，将整个UI包裹在一个JSX片段中，如<></>。

我将给出一个代码示例，以便您更好地理解。我已在iPhone 11 Pro Max和iPhone 14上进行了测试，效果良好。

import React, {useState, useContext} from 'react';
import {
  SafeAreaView,
  Text,
  View,
  Dimensions,
  StyleSheet,
  Alert,
  FlatList,
  StatusBar,
  TouchableOpacity,
  Image,
  ScrollView,
  Linking,
  Platform,
  ActivityIndicator,
} from 'react-native';
const {height, width} = Dimensions.get('window');
import {
  BackArrow,
  UserIcon,
  BellIcon,
  LogoutIcon,
  HomeIcon,
} from '../Includes/Includes';
import Colors from '../Components/Colors';
import {WebView} from 'react-native-webview';
const Notification = () => {
return(
<>
    {
      Platform.OS == "ios" && (
        <View style={{width: "100%", height: height * 0.05, backgroundColor: Colors.themeColor}}/>
      )
    }
    <SafeAreaView style={styles.mainContainer}>
      <StatusBar
        barStyle={'light-content'}
        backgroundColor={Colors.themeColor}
      />
      <InnerHeader />
      <MyView />
</SafeAreaView>
</>
)
}

- Roshik_bangalee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sdkcy · Accepted Answer

在 iOS 平台上，React-Native 不支持更改 StatusBar 的背景颜色，但在 Android 平台上可以 (https://facebook.github.io/react-native/docs/statusbar#backgroundcolor)。我为你的问题编写了一个解决方法，你可以放心使用。

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </View>
        );
    }
}

export default App;

关于 SafeAreaView：

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";
import SafeAreaView from "react-native-safe-area-view";
//You can also use react-navigation package for SafeAreaView with forceInset.

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <SafeAreaView style={{flex:1}}
                forceInset={{top: 'never'}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </SafeAreaView>
        );
    }
}

export default App;