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

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

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

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

android ios react-native expo

06.04.2019 20:45

Коллекции (ArrayList , HashSet , HashMap)

219

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

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

— 06.04.2019 21:20

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

— 06.04.2019 21:37

На самом деле ваше решение работает, высота фиксации не влияет на нижний вид.

— 06.04.2019 21:45

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

— 06.04.2019 21:49

подождите, это не влияет на нижний вид, но влияет на центральный вид, он больше не идеально центрирован, нет лучшего решения?

— 06.04.2019 21:56

06.04.2019 20:57

Ответ принят как подходящий

Это не проблема флексбокса. Эта проблема возникает из-за того, что собственный компонент реакции работает по-разному на обеих платформах. В 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

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

— 06.04.2019 22:03

Значит текст не по центру??

— 06.04.2019 22:05

неа, только первый ряд виден, в закуске видно

— 06.04.2019 22:09

@alfredopacino, пожалуйста, проверьте закуску, я обновлю свой ответ. Вы добавили один дополнительный вид, поэтому удалите его.

— 06.04.2019 22:30

удали это<Вид>удали это <View style = {{background:"red",flex: 1, flexDirection: 'column',alignItems: 'center', justifyContent: 'center'}}> <Image style = {{width: 50, height : 50}} source = {{uri: 'facebook.github.io/react-native/docs/assets/favicon.png'}} /> <Text style = {{textAlign:"center",padding:Platform.OS==='ios'?15:0}‌}> Lorem ipsum dolor sit amet,{"\n"}consectetur adipiscing elit. удостоверение личности ут augue. </Text> </View> удали это</Вид>удали это

— 06.04.2019 22:32

Хорошо, мне потребовалось некоторое время, чтобы понять, какое у вас решение :) Вы просто помещаете нижний вид за пределы флексбокса «основного» столбца. решение

— 06.04.2019 22:45

Удачного кодирования, чувак?

— 06.04.2019 22:48

06.04.2019 21:54