0

问题：

我用 React Native 创建了一个小的 iPhone 应用程序v 0.61 我的内容在左右两边都遵循一条大线，25px在较大的 iPhone（iPhone X+）上看起来非常好，但在 Iphone SE 上看起来不太好. 余量太大。如何找出每个设备的完美边距？

主要是我正在考虑将最左边的内容与状态栏的“当前时间”对齐，最右边的内容与左边的边距相同

像这样的东西：

在此处输入图像描述

4

3 回答 3

1

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

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, 
  },
})

参考链接

尺寸链接

也看看这个链接PixelRatio

React Native 样式备忘单

于 2019-09-30T12:44:12.220 回答
0

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

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

于 2019-09-30T12:21:53.960 回答
0

我一直在使用这个小型实用程序库react-native-size-matters

这个库最好的一点是您可以根据设备的大小可以增加多少来改变比例。唯一有点问题的是设置从中绘制测量值的基本设备。我克隆了 repo 并根据我的需要进行了更改。看看这个！

于 2019-09-30T16:35:43.700 回答