React Native Expo循环渲染网络图片不显示及网格布局实现问题

图片无法显示问题修复 #

• 必现问题修复：React Native 远程加载Image组件必须显式设置宽高样式，默认无尺寸会导致渲染后不可见，修改样式如下：

// 给photo样式添加图片相关配置
const styles = StyleSheet.create({
  // 其他原有样式保留
  photo: {
    margin: 8,
    alignItems: 'center'
  },
  carLogo: {
    width: 100, // 可按需求调整尺寸
    height: 100,
    resizeMode: 'contain'
  }
})

对应的Image组件修改为：

<Image style={styles.carLogo} source={{ uri: item.logo }} />

• OneDrive链接修正：当前使用的是OneDrive分享跳转链接，并非直链资源地址，需转换为直接资源链接后才能正常加载。
• 网络限制排查：若测试用的公共图片为HTTP协议，Android 9及以上版本默认禁止明文请求，可在Expo项目app.json的android配置项下添加"usesCleartextTraffic": true开启明文权限，生产环境建议替换为HTTPS资源。
• 调试小技巧：可临时在source配置中添加缓存策略，避免本地缓存干扰：source={{ uri: item.logo, cache: 'no-cache' }}

网格布局实现方案 #

推荐使用内置FlatList组件实现网格布局，自带渲染性能优化，配置numColumns属性即可快速实现多列网格，完整代码如下：

import { View, Text, Image, FlatList, StyleSheet } from 'react-native';

// 假设api是你解析后的JSON数组
export default function CarList() {
  const renderItem = ({ item }) => (
    <View style={styles.photo}>
      <Text>{item.brand}</Text>
      <Image style={styles.carLogo} source={{ uri: item.logo }} />
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={api}
        renderItem={renderItem}
        keyExtractor={item => item.brand}
        numColumns={2} // 可自定义列数，示例为2列网格
        contentContainerStyle={styles.carlist}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 20
  },
  carlist: {
    justifyContent: 'space-between'
  },
  photo: {
    flex: 1,
    margin: 8,
    alignItems: 'center',
    marginBottom: 24
  },
  carLogo: {
    width: 120,
    height: 120,
    resizeMode: 'contain',
    marginTop: 8
  }
})

注意：你提供的JSON数据存在语法错误，models数组最后一项后多余逗号需要删除，否则JSON解析会失败。

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