如何使用反应原生FlatList，ListItem做两个副标题？

Question

我列出了我的本机应用程序。 我有这个：

<FlatList
    data={this.state.items}
    renderItem={({ item }) => (
        <ListItem
            title={`${item.object.street_number}${item.object.apt_number?'/'+item.object.apt_number:''} ${item.object.street_name} ${item.object.city}`}
            subtitle={`Payment: ${item.data[0].is_paid ? 'Paid' : 'No Paid'}`}
        />
    )}
/>

我可以做第二个字幕还是换行？

Answer 1

完全取决于您定义自己的renderItem（）函数

renderItem({item}) {

  const time = `${item.time}`;
  const place = `${item.place}`;
  const temp = css.addDegreesToEnd(item.currentTemp);
  const {iconName, iconFont, iconColor} = item.icon;

  let actualRowComponent =
    <View style={css.home_screen_list.row}>
      <View style={...}>
        <Text style={...}>{time}</Text>   //First text
        <Text style={...}>{place}</Text> //Second
      </View>
      <Icon color={iconColor} size={...} name={iconName}  //Others
            type={iconFont}/>
      <Text style={...}>{temp}</Text>
    </View>;

  ...

}

即使是复杂的布局也是可能的，更不用说两个文本行，例如：