ios - 将 UIImage 传递给 RCTRootView

Question

我正在开发一个混合 ios 原生/react-native 项目。

假设我有一个 UIImage 的实例在我的应用程序的某个时刻。我需要在我的 react native 组件中显示此图像。我创建了一个 RCTRootView像这样:

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"SomeScreen"
                                           initialProperties:someParameters
                                               launchOptions:launchOptions];

接下来我该做什么？Facebook 介绍了如何使用<Image>带有 uri 的组件，在本地文件系统或 Web 中寻址图像。但我不想下载两次(我也不想在react-native中重新实现身份验证)。

有什么办法可以传递已经存在的UIImage react native 组件？

Answer 1

我知道 OP 问题中的代码是用 Obj-C 编写的，但我正在使用 Java 来解决这个问题(这个问题已经有 2 年历史了)。如果您使用 Obj-C，请将此代码从 Swift 转换为 Obj-C，因为它应该可以工作。

我将图像数据从 native (Swift) 应用程序发送到我的 RN 应用程序的操作是:

我通过这样做将图像作为 Base 64 编码字符串发送:

//Add more images as needed
let images = [UIImage(named: "myImage")?.pngData()?.base64EncodedString()]
let props: [String : [String?]] = [
    "images": images //Remember this key
]
let rootView = RCTRootView(
    bundleURL: jsCodeLocation,
    moduleName: "RNHelloWorld",
    initialProperties: props,
    launchOptions: nil
)

然后，在您的 RN 类上执行以下操作:

export default class MyClass extends React.Component {
    renderImage(encodedImage) {
        //You need to manually specify widht and height
        //And decode your image as a base 64 image
        return <Image style={width: 50, height: 50} source={{uri: `data:image/png;base64,${encodedImage}`}} />
    }
    render() {
        //Use the same name as in your props key in Swift
        return <View>{this.props.images.map(this.renderImage}</View>
    }
}

那么，你就可以开始了。