2016-01-07 5 views
1

Я столкнулся с довольно странными макетами в приложении React Native. Мой макет в основном основан на flexbox с некоторыми исключениями, когда дело доходит до полей, размеров изображений и высоты панели вкладок. Запуск приложения на двух разных симуляторах вызывает различное поведение. На симуляторе 5S он выглядит великолепно. При работе на симуляторе 6S Plus некоторые строки в ListView выглядят странно, а поле/padbar панели вкладок выглядит странно (см. Прикрепленные скриншоты). Кто-нибудь, кто столкнулся с этой проблемой или мог знать, что ее вызывает?Вопросы макета с React Native

5S simulator 6 Plus simulator

С уважением Йохан

+0

префикс свойства flex с префиксом '-webkit-'? У iOs есть некоторые неподдерживаемые свойства гибкости ванили. –

+0

Нет. У меня нет. Я попробую это. Спасибо! –

+0

У меня были некоторые проблемы, когда симулятор масштабируется ниже 100%. Может быть, вы можете это проверить. – purii

ответ

1

Я просто побежал в аналогичный вопрос с родной реагировать вкладки маршрутизатора поток бар (который должен использовать тот же Bar Tab вы используете). Я обнаружил, что проблема заключается в использовании десятичного знака для borderTopWidth.

Мой стиль для панели вкладок был:

tabBarStyle: { 
     borderTopWidth : .5, 
     borderColor : '#DEF6FC', 
     backgroundColor: '#FFF', 
     opacity  : 1, 

    } 

Изменен:

tabBarStyle: { 
     borderTopWidth : 1, 
     borderColor : '#DEF6FC', 
     backgroundColor: '#FFF', 
     opacity  : 1, 

    } 

И все работало нормально. Я действительно скопировал этот стиль из примера, который я видел в Интернете, поэтому на самом деле не знал, что/почему. Но переключение его сделало представления в стандартном и плюсовом представлении. Надеюсь, это поможет!