Я добавляю изображение и несколько текстовых входов (FloatLabelTextInput) в <View> в приложении, поддерживающем реакцию. Пока мне не очень повезло с равномерным распределением изображения и текста по оси Y с помощью свойства flex. Поскольку изображение отображается слишком маленьким по высоте, а оставшийся FloatLabelTextInput занимает слишком большую высоту по оси Y.

Я протестировал и смоделировал представление приложения в песочнице Expo, ориентированной на реакцию, для справки здесь с тем же CSS, который я использую:

  • 1 Изображение обрезано, а ввод текста занимает слишком большую высоту: https://snack.expo.io/rydGFtHQG

  • 2 Изображение отображается правильно, но внешние входы занимают слишком большую высоту: https://snack.expo.io/HyS1VYU7f

Я также пытался установить атрибут flex как часть общей гибкости, но это не регулирует ширину или высоту интервала между элементами в представлении.

Вопрос:

Как можно равномерно распределить изображения и дочерние элементы с помощью гибкого блока?

Предлагаемый макет: (это макет, к которому я стремлюсь, изображение занимает всю ширину просмотра и 40% высоты, отображая полное изображение, а три TextInput под изображением занимают еще 40% с высотой 20 пикселей)

enter image description here

Что отображается: (это то, что отображается с этим стилем макета, изображение занимает около 10% области просмотра и обрезано. Оставшиеся три элемента TextInput занимают около 50% площади просмотра и около 50 пикселей в высота каждого слишком высока для этого макета.

enter image description here

Просмотр определения стиля:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"column",
    //alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1'
  },
  image: {
    flex: 2/4,
    resizeMode: 'contain',
    width: 800,
    height: 800,
  },
  floatLabelTextInput: {
    flex: 2/4,
    padding: 8,
  },
});
2
Brian J 31 Дек 2017 в 00:48

2 ответа

Лучший ответ

Я не совсем уверен, что понимаю, чего вы здесь пытаетесь достичь, но глядя на это изображение 2/4 и ввод текста 2/4, и из этой строки So far I'm not having much luck spacing the image and text inputs evenly on the y-axis Я считаю, что вы хотите, чтобы изображение занимало 50% строки, а 3 текстовых ввода вместе занимали остальные 50%.

Вы можете импортировать Dimensions из react-native и делать
const ScreenWidth = Dimensions.get('window').width;
а затем используйте maxWidth, чтобы изображение не было слишком большим

Вот SnackExpo для моего кода. https://snack.expo.io/HJXemkUXM

Может быть, вы могли бы сделать быстрый набросок краской или что-то еще, чтобы показать нам, что вы хотите, где и как вы хотите, чтобы это выглядело.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: 'lightgreen',
    maxWidth: ScreenWidth,
    paddingTop: 25,
  },
  image: {
    maxWidth: ScreenWidth*0.50,
    height: 200,
    // flex: 2/4,
    // resizeMode: 'contain',
    // width: 800,
    // height: 800,
  },
  floatLabelTextInput: {
    // flex: 2/4,
    // padding: 8,
  },
});
1
Ricky Dam 31 Дек 2017 в 04:20

Похоже, что исходный из response-native-float-label-test-input применяет свойства стиля, которые вы передаете, к поддерживаемому TextInput, который будет вести себя иначе, чем если бы свойство flex было применено к внешнему контейнер View.

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

Изменить: также стоит отметить, что контейнер View из этого пакета действительно имеет набор flex: 1, который вызовет некоторые головные боли, вероятно, если вы не вложите их в свой собственный View, где вы управляете height и / или flex.

2
Ian Mundy 31 Дек 2017 в 02:09