我正在研究混合ios本地/反应本地项目。
假设我在应用中的某个时刻有一个UIImage
的实例。我需要在我的本机组件中显示此图像。我这样创建一个RCTRootView
:
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"SomeScreen"
initialProperties:someParameters
launchOptions:launchOptions];
接下来我该怎么办?Facebook描述了如何在uri中使用<Image>
组件,以本地文件系统或Web中的图像寻址。但是我不想下载两次(也不想在react-native中重新实现身份验证)。
是否有任何方法可以将已经存在的UIImage
传递给本机组件?
我知道OP问题中的代码在Obj-C中,但是我正在使用Java进行研究(这个问题已经有2年历史了。)。如果您使用的是Obj-C,则应将此代码从Swift转换为Obj-C,因为它可以正常工作。
我将本机(Swift)应用程序的图像数据发送到RN应用程序的操作是:
通过此操作,我将图像作为基本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>
}
}
然后,你很好。