如何在多个设备的 react-native 中找出内容的正确左右边距？

Question

问题：

我用 React Native 创建了一个 iPhone 小应用 v 0.61 我的内容在左侧和右侧遵循一条一般线，边距为 25px，在较大的 iPhones (iPhone X+) 上看起来非常好，但在 [=30= 上查看时] SE 它看起来不太好。保证金太多。如何找出每台设备的完美余量？

主要是我在考虑将最左边的内容与状态栏中的 "current time" 对齐，最右边的内容与左边 [ 的边距相同=13=]

类似的东西：

Answer 1

您可以使用 SafeAreaView component 轻松实现此目的，其目的是在 iOS 设备（版本 11 或更高版本）的安全区域边界内呈现内容。

SafeAreaView 呈现嵌套内容并自动应用填充以反映未被导航栏、选项卡栏、工具栏和其他祖先视图覆盖的视图部分。此外，最重要的是，Safe Area 的填充反映了屏幕的物理限制，例如圆角或摄像头缺口（即 iPhone X 上的传感器外壳区域）。

Answer 2

您可以使用维度来计算设备的宽度和高度，然后设置边距或填充

import { Dimensions } from 'react-native'

var deviceWidth = Dimensions.get('window').width
var deviceHeight: Dimensions.get('window').height

查看代码

View style={styles.viewStyle}>

 </View>

 const styles=StyleSheet.create({
  ViewStyle:{      
  marginTop: deviceHeight * 0.05, // 5 percentage of the screen height
  marginBottom: deviceHeight * 0.05 ,
  marginLeft: deviceWidth * 0.05, , // 5 percentage of the screen width
  marginRight: deviceWidth * 0.05, 
  },
})

参考链接

Dimensions link

也看看这个linkPixelRatio

React Native Styling Cheat Sheet

Answer 3

我一直在使用这个小工具库react-native-size-matters

关于这个库的最好的事情是你可以根据大小可以增长多少来改变比例 device.Only 有点问题的是设置测量的基本设备 drawn.I克隆了 repo 并根据我的 needs.Check 进行了更改！

如何在多个设备的 react-native 中找出内容的正确左右边距？

How to find out the correct left and right margins of the content in react-native for multiple devices?

react-native

react-native-stylesheet