React Native - 如何将数据传递给作为另一个组件内部属性的组件

所以我有这段代码可以遍历数据列表。我正在尝试渲染头像图像,但它不起作用。我假设我必须以某种方式将“item.icon”放入 Avatar.Image 的“props”中,但我不太确定该怎么做。

import React,{useState} from 'react';
import {flatList,View,Text,StyleSheet,SafeAreaView} from 'react-native';
import {Avatar,IconButton,Card,Title} from 'react-native-paper';
import Loader from '../components/Loader';

return (
<SafeAreaView style={styles.container}>
<flatList
style={styles.flatlist}
data={[
          {
icon: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.flaticon.com%2Ffree-icon%2Favatar_194938&psig=AOvVaw3_3HQarqJzjX8MBiBqsmxM&ust=1627701465958000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCJCz6c_qifICFQAAAAAdAAAAABAD',username: 'John Smith',date: 'June 20 2021',},]}
renderItem={({item}) => (
<Card mode={'outlined'} style={{marginBottom: 10}}>
<Card.Title
title={item.username}
subtitle={item.date}
icon={item.icon}
left={props => (
<Avatar.Image size={35} source={{uri: item.icon}} />
              )}
/>
</Card>
        )}
/>
</SafeAreaView>
  );
};
min9884 回答:React Native - 如何将数据传递给作为另一个组件内部属性的组件

我认为问题在于您的图片网址,最好使用指向您图片的直接链接,例如 https://image.flaticon.com/icons/png/512/194/194938.png

本文链接:https://www.f2er.com/7285.html

大家都在问