React Native - установите высоту просмотра такой же, как содержимое

Question

У меня есть родительский View контейнер с двумя дочерними элементами Views с flexDirection: row

Высота одного дочернего элемента View больше высоты другого child Просмотр из-за содержимого, которое он имеет.

Что я хочу сделать?

Я хочу разместить вертикально центрированный текст в одном из дочерних видов, который короче по высоте. В приведенном ниже примере текст «БЮДЖЕТ» должен находиться в центре изображения, которое находится рядом с ним.

Вот ссылка на мою проблему.

https://snack.expo.io/ByWT6Cb5V

Но проблема в том, что если я сделаю alignSelf: center, то реагирую на нативный учитывает высоту большего дочернего представления и центрирует текст в соответствии с этим контекстом

P.S marginTop выполняет работу за меня, но я чувствую, что это своего рода работа вокруг.

Мой реальный вопрос: почему высота вида, в которой меньше содержимого, занимает ту же высоту, что и высота его вида-брата?

Answer 1

на самом деле я не понимаю ваш вопрос, который вы говорите ((В приведенном ниже примере текст «БЮДЖЕТ» должен быть в центре изображения, которое находится рядом с ним.)), Если вы хотите показать что-то внутри изображение, например, как вы говорите, показать «БЮДЖЕТ» в центральной части, что вы должны использовать фоновое изображение:

import * as React from 'react';
import { Text, View, StyleSheet, Image,ImageBackground } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
//import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
// import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex:1, marginTop:100}}>
            <View style={styles.budgetBlock}>
                            <View style={styles.budgetTextBlock}>
                                <ImageBackground source={require('./assets/snack-icon.png')} style={{width:50, height:50,justifyContent:'center',alignItems:'center'}} >
                                <Text style={styles.budgetText}> BUDGET </Text>
</ImageBackground>
                            </View>
                            <View style={styles.budgetValueBlock}>
                                    <Text style={styles.budgetType}> Too High </Text>
                                    <Text style={styles.budgetType}> Too High</Text>
                                    <Text style={styles.budgetType}> Too High</Text>
                                    <Text style={styles.budgetType}> Too High</Text>
                            </View>
                        </View>
        </View>
    );
  }
}

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

 budgetTextBlock: {
    flexDirection: 'row',
    alignItems: 'center',<<<<<<this shows BUDGET in center
    height: 'auto',

}