Pass UIImage to RCTRootView

Question

I am working on a hybrid ios native / response-native project.

Let's say I have an instance UIImageat some point in my application. I need to display this image in my component related to the reaction. I create RCTRootViewas follows:

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

What should I do next? Facebook describes how to use the component <Image>with uri, referring to the image on the local file system or on the Internet. But I don’t want to download it twice (also I don’t want to redefine authentication in native-native).

Is there a way to transfer an already existing UIImagecomponent of the-native reaction?

Answer 1

, OP Obj-C, , Java ( 2 ). Obj-C, Swift Obj-C , .

Native (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>
    }
}

.