Высота зрения в реакции родной

Question

Можно ли сделать <View /> такой же высоты? Я получаю данные со стороны сервера, и некоторые материалы короткие, а некоторые длинные. Поэтому, когда я отображаю их в форме ящика, высота ящика не одинакова. Если я исправлю высоту или минимальную высоту, длинный текст будет превышать высоту поля.

РЕДАКТИРОВАТЬ: Пример кода

DisplayEguides(){
  var winsWidth = Dimensions.get('window').width;

  if(this.state.eguides != null){
    var eguides = this.state.eguides.map((data, i)=>(
      <View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
        <TouchableOpacity 
          onPress={()=>this.OpenUrl(data.url)}
          style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
          <View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
            <Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
              <Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
              <AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
            </View>
          </View>
        </TouchableOpacity>
      </View>
    ))

    return (
      <View style={{ paddingHorizontal: 15 }}>
        <AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
      </View>
    );
  }
}

Answer 1

Похоже, что Flexbox в реагирует на родной язык делает свою работу, но нужно поместить в нужный элемент. Установка вида на flex: 1 автоматически настроит все содержимое внутри него на одинаковую высоту. В моем случае я должен установить flex: 1 на TouchableOpacity, так как стиль моего ящика в этом элементе.

<TouchableOpacity 
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
  { /* The rest of code goes here */ }
</TouchableOpacity>