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

Question

Я заметил, что response-native рендерит flexbox различными способами на разных платформах.Это то, что я хочу получить (что также я получаю в Android) https://www.awesomescreenshot.com/image/3959528/64351746a0c4eca7f83c2bc981dad55a

Итак, просто изображение и текст, центрированный по экрану по вертикали и горизонтали, и текст в нижней части экрана. В iOS я не вижу текст "центральный текст"

Вы можете воспроизвести поведение здесь https://snack.expo.io/@alfredopacino/flexbox-ios-android У кого-нибудь есть решение для этого?

Answer 1

Это не проблема flexbox. Эта проблема возникает из-за реакции собственного компонента, работающего по-разному на обеих платформах. В Ios реагирует нативный компонент по умолчанию заполнение 0.

В Android Textinput и Text по умолчанию используются некоторые отступы, но в IOS по умолчанию заполнение этого компонента равно нулю (0)

Эта проблема может быть решена в ближайшем будущем с помощью реагирующей команды ?.

Если вы добавите отступ в ваш стиль текста, я буду работать как шарм

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

Обновить ответ

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

Answer 2

Добавьте некоторую высоту, чтобы она работала

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