Question

我正在尝试将不同的图像添加到我的列表的每个键中。但是，图像不是通过渲染项目而是按键来显示在屏幕上的。图像的来源和图像的名称一样正确。你能找到我犯的错误吗？

export default class HomeScreen extends React.Component {
 constructor(props) {
super(props);
this.state = {
  searchText: '',
};
 }

 render() {
//Data can be coming from props or any other source as well
const data = [
  { 
    key: 'Tiago',
    logo: '../assets/athlean_x.png'
  },
  { 
    key: 'Beatriz',
    logo: "euro2020.png"
  },
  { 
    key: 'Ricardo',
    logo: "jamor.png"
  },
  { 
    key: 'Miguel',
    logo: "rock_in_rio.png"
  },
  { 
    key: 'Simão',
    logo: "splash.png"
  },
  { 
    key: 'David',
    logo: "edp_cooljazz.png"
  }
];

const filteredData = this.state.searchText
  ? data.filter(x =>
      x.key.toLowerCase().includes(this.state.searchText.toLowerCase())
    )
  : data;
return (
  <View style={styles.container}>
    <View style={styles.flatlist}>
      <FlatList
        data={filteredData}
        renderItem={({ item }) => (
          <View style={{flexDirection:'row'}}>
            <Image 
              style={{width:50, height:50, alignSelf: 'center', borderRadius:300}}
              source={{uri:item.logo}}/> 
            <Text style={styles.item}>{item.key}</Text>   
          </View>         
        )}
      />
    </View>
  </View>
);
  }

Answer 1

如果您将图像保存在资产文件夹中，则需要这样做否则，如果您要直接从https服务器渲染您应该在图像名称之前添加前缀。

希望这可以帮助您理解。

呈现平面列表时缺少图像

1 个答案: