在某些非常特殊的情况下,我需要将视图的高度设置为设备有用区域的全高(不使用 flex)。
我使用硬编码的“缺口高度”来计算这个有用的高度,但我刚刚发现缺口可以有不同的高度,具体取决于设备。(iPhone XS 和 iPhone XS Max 的 3 点差异)。
有没有办法知道带有缺口和安全区域的设备的有用高度?
在某些非常特殊的情况下,我需要将视图的高度设置为设备有用区域的全高(不使用 flex)。
我使用硬编码的“缺口高度”来计算这个有用的高度,但我刚刚发现缺口可以有不同的高度,具体取决于设备。(iPhone XS 和 iPhone XS Max 的 3 点差异)。
有没有办法知道带有缺口和安全区域的设备的有用高度?
正如@mohammed-ashfaq 所说,react-native-safe-area解决了这个问题。但是,它返回带有Promise的插图,我静态地需要这些值。
鉴于此,我创建了react-native-static-safe-area-insets,它可以将 insets 值作为常量访问。
使用“react-native安全区域上下文”
https://www.npmjs.com/package/react-native-safe-area-context#usesafeareainsets
import { useSafeAreaInsets } from 'react-native-safe-area-context';
function Screen() {
const insets = useSafeAreaInsets();
console.log(insets);
//{"bottom": 34, "left": 0, "right": 0, "top": 48}
return <View />;
}
您可以使用react-native-safe-area。它提供了获取安全区域插入顶部、底部、左侧、右侧的功能。
import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'
//Retrieve safe area insets for root view
SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
console.log(result)
// { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})
您可以从 Dimensions 组件中获取屏幕、用户电话、宽度和高度。
import { Dimensions } from 'react-native'
const { width, height } = Dimensions.get('window'); // if you use the width you can get the screen width by pixels. And also height is the height pixels of the phone.
const screenWidthSomePart = width * 0,6 // 有时您可以获得屏幕的百分比,以便您可以使用它。屏幕 %60
如果你想看看 Iphone X 的保险箱。你可以使用 SafeAreaView Componenet
import { SafeAreaView } from 'react-native'
return(
<SafeAreaView>
..... // your screen componenet
</SafeAreaView>
);