Как выровнять изображение и его текст (символ больше, чем строка) ниже в макете сетки с использованием response-native-flatlist - PullRequest
Новая
       12

Как выровнять изображение и его текст (символ больше, чем строка) ниже в макете сетки с использованием response-native-flatlist

0 голосов
/ 23 сентября 2019

Как выровнять текст под изображением в сетке.Я показал сетку с помощью response-native-flatlist.Но текст под изображением, который имеет небольшую длину, выровнен по центру и работает ожидаемо.Но если длина слишком велика, она отображается во всей сетке и скрывает следующее изображение справа от сетки.Как показать, что длина слишком длинная в строке.

Я использовал приведенный ниже фрагмент кода, и мне нужно показать текст под изображением как Вопреки распространенному мнению, Лорем .. 

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>
    );
  }

Здесь Если добавить длинное описание персонажа, как указано выше, оно отображается в центре, а правое изображение скрывается справа.

Есть ли какое-нибудь решение для этого?

1 Ответ

2 голосов
/ 23 сентября 2019

Попробуйте это на своей карте или в любом цикле для сетки: - 

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