flexbox 在 iOS/android 上的行为不同答案

【问题标题】：flexbox behaves differenly on iOS/androidflexbox 在 iOS/android 上的行为不同
【发布时间】：2019-04-06 18:45:46
【问题描述】：

我注意到 react-native 在各个平台上以不同的方式呈现 flexbox。这就是我想要得到的（我也在 android 中得到） https://www.awesomescreenshot.com/image/3959528/64351746a0c4eca7f83c2bc981dad55a

所以只是一个图像和一些垂直和水平居中的文本，以及屏幕底部的一些文本。 在 iOS 中，我看不到“中心文字”文字

您可以在此处重现该行为 https://snack.expo.io/@alfredopacino/flexbox-ios-android 有人对此有解决方案吗？

【问题讨论】：

【解决方案1】：

这不是 flexbox 问题。之所以会出现此问题，是因为 react native 组件在两个平台上的工作方式不同。在 Ios React Native 组件中，默认的 padding 是 0。

在 Android Textinput 和 Text 中默认采用一些填充，但在 IOS 中，此组件的默认填充为零（0）

React Native 团队可能会在不久的将来解决这个问题?。

如果您在样式文本中添加填充，我会像魅力一样工作

<Text 
  style={{padding:Platform.OS==='ios'?15:0,
 }}>
Center text
</Text>

更新答案

【讨论】：

似乎填充不是唯一的区别，我用你的解决方案更新了零食，它突出了一个问题，以防长文本
你的意思是文字不在中心？？
nop，只有第一行是可见的，你可以在小吃里看到
好的，我花了一段时间才知道你的解决方案是什么 :) 你只需将底部视图放在“主”列 flexbox 之外。结果是中心视图不是完全垂直居中的，但是我想没有简单更好的解决方案
祝你编程愉快?

【解决方案2】：

添加一些高度，它会起作用

<Text style={{height:50}}>
    Center text
</Text>

【讨论】：