flexbox 在 iOS/android 上的行为不同

Posted 2023-03-15

【中文标题】flexbox 在 iOS/android 上的行为不同

【英文标题】：flexbox behaves differenly on 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>

更新答案

https://snack.expo.io/@vishal7008/flexbox-ios-android

【讨论】：

似乎填充不是唯一的区别，我用你的解决方案更新了零食，它突出了一个问题，以防长文本

你的意思是文字不在中心？？

nop，只有第一行是可见的，你可以在小吃里看到

好的，我花了一段时间才知道你的解决方案是什么 :) 你只需将底部视图放在“主”列 flexbox 之外。结果是中心视图不是完全垂直居中的，但是我想没有简单更好的解决方案

祝你编程愉快?

【参考方案2】：

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

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

【讨论】：

我简化了文本是动态多语言的例子，我不能设置一个固定的高度

它们的活力有多大？你到底想做什么？

实际上你的解决方案似乎有效，固定高度不会影响底部视图

很高兴为您提供帮助

等等，不影响底部View但影响中心View，不再完全居中，没有更好的解决方案？