Question

我正在使用...

<FlatList
  data={this.state.dataSource}
  renderItem={({item}) => <Text>{item.username} {item.name}</Text>}
  keyExtractor={({id}, index) => id}
/>

...在React Native中渲染两个文本，但是现在我的json中有一个uri ...

如何以IM样式（缩略图，用户名和名称）渲染图像？

Answer 1

您可以构建一个以字段为支撑的组件，其中包含多个Text和一个Image（使用uri作为源）。像对其他任何组件一样设置样式，然后将该组件传递到renderItem中。

Answer 2

添加renderItem方法，然后将所需的所有内容放入其中。创建renderItem方法后，可以将其放入FlatList中。

renderItem({ item }) {
  return (
    <View>
      <Image
        source={{uri: item.uri}}
      />
     <Text>
       {item.username}
     </Text>
     <Text>
       {item.name}
     </Text>
</View>

 );
}

然后使用FlatList中的方法（.bind确保其位于正确的上下文中）

<FlatList
  data={this.state.dataSource}
  renderItem={this.renderItem.bind(this)}
  keyExtractor={({id}, index) => id}
/>

Answer 3

如果清单列表项目不复杂（组件很多），您可以像这样将组件立即嵌入renderItem中

<FlatList
   data={this.state.dataSource}
   renderItem={({item}) => {
         <View>
              <Image source={{uri: item.uri.image}}/>
              <Text>{item.userName}</Text>
              <Text>{item.name}</Text>
         </View>
   }}
   keyExtractor={(i) => i.toString()}
/>

如何从提取的json呈现不同的数据类型？

3 个答案: