0

我想使用一个 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>

这导致以下结果。

在此处输入图像描述

4

1 回答 1

0

您可以通过以下方式执行此操作

<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

于 2018-12-31T06:43:39.613 回答