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

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

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

Align list with image and two text components

react-native

flexbox

react-native-flexbox