React Native报错NSMutablearray无法转换为有效URL如何解决

• 修正source属性键名
  React Native的Image组件加载网络资源时，source对象的键必须是uri而非url，首先将代码中对应部分修改为source={{ uri: i }}。
• 给Image组件设置明确宽高
  Image组件不会自适应内容大小，必须在样式中明确指定width和height才会渲染内容，参考样式配置如下：

const styles = StyleSheet.create({
  banner: {
    width: '100%',
    height: 200,
    resizeMode: 'cover'
  }
})

• 替换本地服务地址
  在模拟器/真机上运行时，地址中的localhost指向设备本身，无法访问你电脑上的本地资源服务，需要将localhost替换为你电脑的局域网IP，确保设备和电脑处于同一WiFi网络下。
• 适配平台明文请求限制
  • iOS默认禁止加载HTTP资源，需要在项目Info.plist中添加App Transport Security例外配置，允许对应域名的HTTP请求。
  • Android 9及以上版本默认禁止明文请求，需要在AndroidManifest.xml的application标签中添加android:usesCleartextTraffic="true"属性。

修改后的完整代码示例：

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

const YourComponent = () => {
  const images = [
    // 将下方IP替换为你的电脑局域网IP
    "http://192.168.3.45/media/categories/Butchies-2_EuH4UEC.jpg",
    "http://192.168.3.45/media/categories/original_cq43Fci.jpg",
  ];

  return (
    <View style={styles.screen}>
      <ScrollView>
        {images.map((i, index) => (
          <Image key={index} source={{ uri: i }} style={styles.banner} />
        ))}
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  screen: {
    flex: 1
  },
  banner: {
    width: '100%',
    height: 200
  }
})

export default YourComponent;

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