将UIImage传递给RCTRootView

时间:2017-02-28 16:21:16

标签: ios react-native uiimage

我正在开发一个混合ios native / 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组件?

1 个答案:

答案 0 :(得分:0)

我知道OP问题中的代码在Obj-C中,但是我正在使用Java进行处理(这个问题已经有2年历史了)。如果您使用的是Obj-C,则应将其从Swift转换为Obj-C,以确保正常工作。

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

我通过以下操作将图像作为64位编码的String发送:

//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>
    }
}

那么,你很好。