时间戳

首页 > 解决方案 > 反应原生的视图高度

css - 反应原生的视图高度

问题描述

是否可以使<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>
    );
  }
}

标签： cssreact-nativeflexbox

解决方案

似乎 React Native 中的 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>

推荐阅读