React Native 如何将数据传递给作为其他组件属性的内嵌组件

问题原因 #

• 代码中Card.Title同时配置了互斥的icon和left属性，冗余属性可能引发渲染冲突
• 使用的item.icon是谷歌图片搜索的跳转链接，并非可直接加载的图片直链，Avatar.Image 无法识别该类地址

修复步骤 #

1. 删除Card.Title上的icon={item.icon}冗余属性，你已经通过left插槽自定义了头像区域，不需要再配置icon属性
2. 将item.icon的值替换为图片的实际直链地址，需要是可以直接访问的png/jpg等静态资源链接
3. 若替换后仍无法加载，检查对应端的网络权限配置：安卓端加载http资源需要额外开启明文访问权限，两端都需要配置基础网络访问权限

修正后可运行参考代码 #

import React, {useState} from 'react';
import {FlatList, StyleSheet, SafeAreaView} from 'react-native';
import {Avatar, Card} from 'react-native-paper';

const AvatarList = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.flatlist}
        data={[
          {
            // 已替换为对应头像的实际直链示例
            icon: 'https://cdn-icons-png.flaticon.com/512/1949/194938.png',
            username: 'John Smith',
            date: 'June 20 2021',
          },
        ]}
        renderItem={({item}) => (
          <Card mode={'outlined'} style={{marginBottom: 10}}>
            <Card.Title
              title={item.username}
              subtitle={item.date}
              left={() => <Avatar.Image size={35} source={{uri: item.icon}} />}
            />
          </Card>
        )}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  flatlist: {
    padding: 10,
  }
});

export default AvatarList;

内容的提问来源于stack exchange，提问作者user12314098