Я добавляю изображение и несколько текстовых входов (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 пикселей)
Что отображается: (это то, что отображается с этим стилем макета, изображение занимает около 10% области просмотра и обрезано. Оставшиеся три элемента TextInput занимают около 50% площади просмотра и около 50 пикселей в высота каждого слишком высока для этого макета.
Просмотр определения стиля:
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 ответа
Я не совсем уверен, что понимаю, чего вы здесь пытаетесь достичь, но глядя на это изображение 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,
},
});
Похоже, что исходный из response-native-float-label-test-input применяет свойства стиля, которые вы передаете, к поддерживаемому TextInput, который будет вести себя иначе, чем если бы свойство flex было применено к внешнему контейнер View.
Я предполагаю, что вы на самом деле не хотите, чтобы TextInput был такого размера, поскольку это приведет к тому, что входные данные будут идентичны размеру изображения. Если бы я работал над этим, я бы, вероятно, дал бы своим входам фиксированную высоту, а затем применил бы стиль гибкости к изображению. Или, если бы я знал размер изображения, я бы также дал ему фиксированный размер.
Изменить: также стоит отметить, что контейнер View из этого пакета действительно имеет набор flex: 1, который вызовет некоторые головные боли, вероятно, если вы не вложите их в свой собственный View, где вы управляете height и / или flex.
En Español