Expo开发React Native应用FlatList不渲染显示空白页问题咨询

你代码里共有4处核心错误，逐一修复即可正常渲染：

• API返回数据类型不匹配FlatList要求
  当前请求的https://fakestoreapi.com/products/1接口返回的是单个商品对象，但FlatList的data属性仅支持数组类型输入。如果需要展示商品列表，把接口地址替换为https://fakestoreapi.com/products即可拿到商品数组；如果确实只需展示单个商品，将setproducts(data)修改为setproducts([data])，把对象包裹为数组即可。
• keyExtractor参数逻辑错误
  原代码keyExtractor={(id) => id}的入参使用错误，keyExtractor接收的第一个参数是列表项本身，需修改为keyExtractor={(item) => item.id.toString()}，用商品唯一id作为列表项的key值。
• FlatList父容器缺失高度规则
  包裹FlatList的外层View未设置flex:1，会导致容器无有效高度，FlatList无法渲染。给外层View添加样式即可：

<View style={{flex:1}}>

• 网络图片source属性格式错误
  Card组件的Image组件接收的是网络图片地址，不能直接将地址传入source属性，需修改为如下格式，同时要给Image组件设置固定宽高样式，否则图片也会无法显示：

<Image source={{uri: img}} style={styles.image} />

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