使列表与图像和两个文本组件对齐

Question

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

结果如下。

Answer 1

您可以按照以下方式进行操作

<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