React Native 的布局问题

【问题标题】：Layout issues with React NativeReact Native 的布局问题
【发布时间】：2016-04-11 19:56:32
【问题描述】：

我在我的 React Native 应用程序中遇到了相当奇怪的布局问题。我的布局主要基于 flexbox，但在边距、图像大小和标签栏高度方面有一些例外。在两个不同的模拟器上运行应用程序会导致不同的行为。在 5S 模拟器上，它看起来很棒。在 6S Plus 模拟器上运行时，ListView 中的某些行看起来很奇怪，标签栏边距/填充看起来很奇怪（请参阅随附的屏幕截图）。还有其他人遇到过这个问题或可能知道是什么原因造成的吗？

问候约翰

【问题讨论】：

你是否用'-webkit-'前缀作为flex属性的前缀？ iOs 有一些不支持的 vanilla flex 属性
不，我没有。我会试试的。谢谢！
当模拟器的缩放比例低于 100% 时，我遇到了一些问题。也许你可以检查一下。
我试过了，但没有帮助

标签： user-interface flexbox react-native

【解决方案1】：

我刚刚遇到了类似的问题，反应原生路由器通量标签栏（应该使用与您正在使用的相同标签栏）。我发现问题是使用小数表示borderTopWidth。

我对标签栏的风格是：

    tabBarStyle: {
        borderTopWidth : .5,
        borderColor    : '#DEF6FC',
        backgroundColor: '#FFF',
        opacity        : 1,

    }

改为：

    tabBarStyle: {
        borderTopWidth : 1,
        borderColor    : '#DEF6FC',
        backgroundColor: '#FFF',
        opacity        : 1,

    }

一切正常。我实际上是从我在网上看到的一个例子中复制了这种风格，所以我真的不知道是什么/为什么。但是将其切换为标准视图和附加视图工作。希望对您有所帮助！

【讨论】：