时间戳

首页 > 解决方案 > 如何使用 react-native-flatlist 在网格布局中对齐图像及其文本（超过一行的字符）

css - 如何使用 react-native-flatlist 在网格布局中对齐图像及其文本（超过一行的字符）

问题描述

如何在网格中对齐图像下方的文本。我已经使用 react-native-flatlist 显示了网格。但是图像下方长度较小的文本居中对齐并且可以正常工作。但是如果长度太长，它会显示在整个网格中，并且会隐藏网格右侧的下一个图像。如何在一行中显示长度是否太长。

我使用了下面的片段，我需要将图像下方的文本显示为与流行的看法相反，Lorem..

renderGridView(){
return (
    <View style={{flex:1}}>
          <FlatList
            ref={(ref) => { this.flatListRef = ref; }}
            data={data}
            renderItem={({ item }) => this.renderGrid(item)}
            numColumns={2}
            extraData={data}
            keyExtractor={item => item.id}
            onEndReached={this._handleMore}
            onEndReachedThreshold={0.001}
            ListFooterComponent={this._renderFooter}
          />
     </View>
    )
 }


renderGrid(item) {
    return(
      <TouchableOpacity activeOpacity = { .5 } >
        <View style={{backgroundColor: 'white', alignItems: 'center'}}>
          <Image style={{width: gridWidth, height: gridHeight}}
            resizeMode={'contain'}
            source={item.uri}/>
            <Text numberOfLines={1}style={{fontSize: 12,textAlign: 'center'}} ellipsizeMode="tail">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</Text>
          <Text numberOfLines={1}style={{fontSize: 12,textAlign: 'center'}} ellipsizeMode="tail">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</Text>
        </View>
      </TouchableOpacity>
    );
  }

在这里，如果像上面那样添加大量字符描述，它会显示在中心，而右侧的图像会隐藏在右侧。

有什么解决办法吗？

标签： cssreact-nativereact-native-flatlist

解决方案

在您的地图或网格的任何循环中尝试此操作：-

<View style={{alignItems: 'center'}}>

 <Image source={require('your path')} />

 <Text numberOfLines={1}style={{fontSize: 12}} 
 ellipsizeMode="tail">Contrary to popular belief, Lorem Ipsum is not simply 
 random text. It has roots in a piece of classical Latin literature from 45 
 BC, making it over 2000 years old. Richard McClintock, a Latin professor at 
 Hampden-Sydney College in Virginia, looked up one of the more obscure Latin 
 words</Text>

</View>

推荐阅读