如何使用 react native FlatList、ListItem 做两个字幕？

【问题标题】：How can i do two subtitle using react native FlatList, ListItem?如何使用 react native FlatList、ListItem 做两个字幕？
【发布时间】：2018-03-14 09:26:52
【问题描述】：

我确实在我的反应原生应用程序中列出。我有这个：

<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'}`}
        />
    )}
/>

我可以做第二个字幕或换行吗？

【问题讨论】：

React Native 中没有 ListItem。那是图书馆吗？

标签： reactjs react-native jsx

【解决方案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>;

  ...

}

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

【讨论】：