因为将backgroundColor props应用到StatusBar组件不会在IOS上应用。我需要设置SafeAreaView的背景颜色以获得我想要的效果,它工作正常,但在iPhone X上,它将在屏幕底部具有相同的颜色。我该如何解决此问题?
7jmck4yq1#
React-Native在iOS平台上不支持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;
wqsoz72f2#
支持iPhone X
除了**@sdkcy的答案外,对于iPhone X**,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;
最后,我还将Android的高度更改为0,因为它会影响NavigationBar的高度,但如果它对您来说工作良好,您可以保持不变。希望这对你有帮助。
hvvq6cgz3#
iPhone X使用44 pt高状态栏const STATUS_BAR_HEIGHT =平台.OS === 'ios'?44:StatusBar.currentHeight;参考这些备忘录
eqfvzcg84#
iOS不像Android那样支持React-Native中的StatusBar组件。实现SafeAreaView组件以某种方式降低了iOS中原始状态栏的视图。我搜索了许多解决方案,其中大多数都被引导使用自定义组件或使用库。这是一个快速的解决方案,在我的脑海里,它工作得很好。就在SafeAreaView将整个UI Package 在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> </> ) }
4条答案
按热度按时间7jmck4yq1#
React-Native在iOS平台上不支持StatusBar的背景颜色更改,但在Android平台上,这是可以的(https://facebook.github.io/react-native/docs/statusbar#backgroundcolor)。我为你的问题写了一个解决方案。你可以安全使用它
对于SafeAreaView:
wqsoz72f2#
支持iPhone X
除了**@sdkcy的答案外,对于iPhone X**,STATUS_BAR_HEIGHT不能为20。
我通过安装以下库解决了这个问题:
https://www.npmjs.com/package/react-native-status-bar-height
安装
导入
并像这样更新STATUS_BAR_HEIGHT:
最后,我还将Android的高度更改为0,因为它会影响NavigationBar的高度,但如果它对您来说工作良好,您可以保持不变。
希望这对你有帮助。
hvvq6cgz3#
iPhone X使用44 pt高状态栏
const STATUS_BAR_HEIGHT =平台.OS === 'ios'?44:StatusBar.currentHeight;
参考这些备忘录
eqfvzcg84#
iOS不像Android那样支持React-Native中的StatusBar组件。实现SafeAreaView组件以某种方式降低了iOS中原始状态栏的视图。我搜索了许多解决方案,其中大多数都被引导使用自定义组件或使用库。这是一个快速的解决方案,在我的脑海里,它工作得很好。就在SafeAreaView将整个UI Package 在JSX片段(如<></>)下之前。
我给你一个例子,让你更好地理解我的代码。我已经在iPhone 11 Pro Max和iPhone 14上测试过了,效果很好。