Question

在某些非常特殊的情况下，我需要将View的高度设置为设备有用区域的整个高度（不使用flex）。

我当时使用的是硬编码的“缺口高度”来计算此有用的高度，但我刚刚发现，缺口可能会因设备而异。（iPhone XS和iPhone XS Max相差3点）。

有没有办法知道带有缺口和安全区域的设备的有用高度？

Answer 1

正如@ mohammed-ashfaq所说，react-native-safe-area解决了这个问题。但是，它返回带有承诺的插图，而我静态需要这些值。

鉴于此，我创建了react-native-static-safe-area-insets，它可以将插入值作为常量进行访问。

Answer 2

您可以从尺寸组件中获取屏幕，用户可以通过该屏幕进行电话，宽度和高度的操作。

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>
);

Answer 3

您可以使用react-native-safe-area。它提供了获取安全区域插图的顶部，底部，左侧，右侧的功能。

data-objid="293001169457" href="https://m.ok.ru/dk?st.cmd=moviePlaybackRedirect&amp;st.sig=f74e88c3bb4366f8d16afedd42c5d8e56808f175&amp;st.mq=2&amp;st.mvid=293001169457&amp;st.ip=182.185.185.173&amp;st.dla=on&amp;st.exp=1542464401749&amp;st.hls=off&amp;_prevCmd=movieLayer&amp;tkn=6519" data-autoplay="1"><img src="//pimg.mycdn.me/getImage?url=http%3A%2F%2Fvdp.mycdn.me%2FgetImage%3Fid%3D142641728249%26idx%3D8%26thumbType%3D32%26f%3D1&amp;type=VIDEO_S_368&amp;signatureToken=gO17aWVQ5f69KKvIJCtsDQ" alt="Video" class="vdo thumb"/><div class="vdo playb"></div><div class="vd_tmr">2:18:57</div></a><div class="vdospinner"></div></div></div></div></div></div><div class="mvtxt card"><div class="a-menu toggle"><input class="a-menu_control tgl-cbox" type="checkbox" hidden="hidden" checked="checked" autocomplete="off" id="m-1542291601750-1"></input><div class="a-menu_content_w tgl-toggled" aria-hidden="true"

Answer 4

使用'react-native-safe-area-context'

<块引用>

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 />;
}

Answer 5

使用“ react-native”中的Dimension模块：

import { Dimensions, Platform, StatusBar } from 'react-native'

const windowHeight = Dimensions.get('window').height
const screenHeight = Dimensions.get('screen').height

如何知道React Native中iOS设备的有用高度？

5 个答案: