如何修复java.lang.String无法转换为com.facebook.react.bridge.ReadableArray错误？

问题代码 #

ViewManager.java #

// setting the source of the ImageView

@ReactProp(name = "src")
public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
    view.setSource(sources);
}

App.tsx #

<POCImageView src={'https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png'} />

报错信息 #

java.lang.string cannot be cast to com.facebook.react.bridge.readableArray

错误原因 #

参数类型不匹配：

• Android原生端setSrc方法声明接收ReadableArray（数组类型）
• React Native JS端传入的是字符串类型URL，导致Java层强转时抛出类型转换异常。

修复方案 #

方案1：修改JS端，传递数组格式参数 #

按照React Native图片组件的标准格式，将URL包装为含uri字段的对象数组：

<POCImageView 
  src={[{ uri: 'https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png' }]} 
/>

方案2：修改Android原生端，兼容字符串参数 #

修改ViewManager的setSrc方法，同时支持字符串和数组类型，自动将字符串转为符合要求的数组格式：

@ReactProp(name = "src")
public void setSrc(ReactImageView view, @Nullable Object src) {
    if (src instanceof String) {
        WritableArray sources = Arguments.createArray();
        WritableMap sourceMap = Arguments.createMap();
        sourceMap.putString("uri", (String) src);
        sources.pushMap(sourceMap);
        view.setSource(sources);
    } else if (src instanceof ReadableArray) {
        view.setSource((ReadableArray) src);
    }
}

内容的提问来源于stack exchange，提问作者AMAL MOHAN N