Совместите список с изображением и двумя текстовыми компонентами - PullRequest
Новая
       28

Совместите список с изображением и двумя текстовыми компонентами

0 голосов
/ 31 декабря 2018

Я хочу использовать FlatList, который будет отображать изображение и текст, который включает в себя имя, дату и изменяющийся фрагмент текста.Упрощенный извлеченный код ниже поместит картинку слева, как я хочу, и отобразит строки текста, соединенные справа.Это в основном то, что я хочу, но я хочу одну строку с именем и датой и еще одну строку с текстом.Ничто из того, что я пробовал, не работает.Как мне это сделать? 

<View style={{flex:1, paddingTop:100}}>
  <View style={{flexDirection:'row', flexWrap:'wrap', alignItems:'flex-start'}}>
    <Image style={{width: 50, height: 50}} source={require('./assets/default.jpg')} />
    <Text style={{flex:1}}>
      <Text style={{fontWeight: "bold", fontSize: 16}}>Steve C</Text>
      <Text style={{color: 'grey', fontSize: 10}}>Dec 30 10:25 PM</Text>
      <Text style={{fontSize: 16}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
    </Text>           
  </View>
</View>

Это приводит к следующему.

enter image description here

1 Ответ

0 голосов
/ 31 декабря 2018

Вы можете сделать это следующим образом 

<View style={{ flex: 1, paddingTop: 100 }}>
    <View style={{ flexDirection: 'row'}}>
      <Image style={{ width: 50, height: 50 }} source={{ uri:'https://img12.androidappsapk.co/300/7/3/a/com.profile.admires_stalkers_unknown.png'}}/>
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={{ fontWeight: "bold", fontSize: 16 }}>Steve C</Text>
          <Text style={{ color: 'grey', fontSize: 10}}>Dec 30 10:25 PM</Text>
        </View>
        <View>
          <Text style={{ fontSize: 16, flexWrap: 'wrap' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
        </View>
      </View>
    </View>
  </View>

Рабочий пример: https://codesandbox.io/embed/6nwv118zz3

...