css - 如何使用 react-native-flatlist 在网格布局中对齐下方的图像及其文本(多于一行的字符)

Question

如何在网格中对齐图像下方的文本。我已经使用 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>
    );
  }

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

有什么解决办法吗？

Answer 1

在你的 map 或网格的任何循环中试试这个:-

<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>