React-Native 中的多个屏幕定位

Posted

技术标签:

【中文标题】React-Native 中的多个屏幕定位【英文标题】:Multiple screens positioning in React-Native 【发布时间】:2016-05-03 16:51:35 【问题描述】:

几周后,我就开始接近 react-native(是的,这很棒)。阅读 Medium https://medium.com/@elieslama/responsive-design-in-react-native-876ea9cd72a8#.qmwrb3ruq 上的这篇精彩文章,我想我已经了解如何调整视图和文本属性(字体大小)等组件的大小。但是,问题来了,如何设置像 marginTop 这样的视图属性以缩放到各种屏幕尺寸? 例如: ... firstView: marginTop : 10 ... marginTop 在 iPhone 5 和 iPhone 6 上是不一样的。 谁能提供一个简单的例子来说明如何做到这一点? 非常感谢!

【问题讨论】:

【参考方案1】:

默认情况下,react native 中的所有单位都使用与密度无关的像素。您可以使用PixelRatio 获取设备像素密度。 对于边距,您可能不想使用不同的像素密度对其进行缩放。所以,你可以把它当作


...
   firstView:
     marginTop : PixelRatio.getPixelSizeForLayoutSize(10)
   
...

【讨论】:

我试试看!谢谢! 应该是 marginTop : PixelRatio.getPixelSizeForLayoutSize(5) 也是一个不错的选择吗? 是的。你说的对。那将是一个更好的选择。我会更新答案。谢谢。

以上是关于React-Native 中的多个屏幕定位的主要内容,如果未能解决你的问题,请参考以下文章

react-native--手绘直线(手势)

react-native 中的 Redux 错误

react-native 中的 navigator.geolocation.getCurrentPosition 是不是与本地地理定位方法一样准确?

在 react-native 中迭代 JSON 数组

在 WebView 中定位元素

reac-native环境搭建