flexbox ведет себя по-разному на iOS / Android

#android #ios #react-native #expo

#Android #iOS #react-native #выставка

Вопрос:

Я заметил, что 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 заполнение по умолчанию равно 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

1. похоже, что заполнение — не единственное различие, я обновил snack вашим решением, которое подчеркивает проблему в случае более длинного текста

2. Вы имеете в виду, что текст находится не по центру??

3. нет, видна только первая строка, вы можете увидеть в закуске

4. Хорошо, мне потребовалось некоторое время, чтобы понять, каково ваше решение 🙂 Вы просто помещаете вид снизу за пределы «основного» столбца flexbox .. в результате вид по центру не идеально отцентрирован по вертикали, но я думаю, что простого и лучшего решения нет

5. Счастливый программист👍

Ответ №2:

Добавьте немного высоты, чтобы это сработало

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

1. Я упростил пример, чтобы текст был динамическим и многоязычным, я не могу установить фиксированную высоту

2. Насколько динамичными они могли бы быть? что именно вы хотите сделать?

3. На самом деле ваше решение, похоже, работает, фиксированная высота не влияет на вид снизу

4. Рад вам помочь

5. подождите, это не влияет на вид снизу, но влияет на вид по центру, он больше не центрирован идеально, лучшего решения нет?