Как правильно делать вёрстку мобильных приложений на react native?

Question

[dimmma77]

Как правильно делать вёрстку мобильных приложений на react native? Можете скинуть простой пример из хэдэра, футэра и с какой-нибудь информацией внутри (например, кнопкой, которая растягивается на всю ширину контейнера). Под разную ориентацию телефона делается своя вёрстка? Просто процентов там нет, а если, скажем, marginTop 50 хорошо смотрится в вертикальной ориентации, то в горизонтальной ориентации получается слишком большой пробел.

Answer 1

[_ _]

Используйте https://github.com/kkjdaniel/react-native-device-d...
для определения режимов ориентации и завязывайте на этом вью (можно просто стили менять, а можно полностью отдельный вью).

Также в порядке бреда можно перед применением стили обрабатывать, чтобы сделать поддержку процентов к ширине и высоте экрана.
Типа

const style = { 
  header: { height: '50%' }    
};

prepareStyle: function() {
  let deviceHeight = ...; // Find API by yourself
  let _style = _.merge({}, style);
  if (style.header.height.substr(-1, 1) === '%') 
    _style.header.height = deviceHeight * (+style.header.height.slice(0, -1)) / 100;

  return _style;
}

Answer 2

[Maxim16]

Аналогом процентов в той версии Flexbox, которая применяется в React Native, является свойство flex.
Например, если у нас есть два элемента , которые вложены в родительский элемент , то можно сделать у первого вложенного в стилях свойство flex:5, а у второго - flex:3. В этом случае первый элемент будет занимать 5/8 от площади родительского элемента, а второй 3/8. Учитывая это, и поэкспериментировав со свойствами alignItems и justifyContent, я думаю, можно добиться нужного отступа без использования margin.

Comments

[dimmma77]

А почему именно 8? Об этом где-нибудь написано? А то я нашёл код, где поделили на 10, а не на 8.

[Maxim16]

нет, ну это просто пример) 8 - это 3+5. Собственно, там можно писать любые числа. Т.е. (надеюсь, так будет понятнее) если у нас есть три дочерних View и у них свойства flex - 1, 2 и 4 (flex:1 , flex:2 и flex:4), то первое View займет 1/7 родительского элемента. 1/7 - это 1/(1+2+4). Соответственно, второе View займет 2/7, а третье - 4/7.