Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of react native native module bridging, which is very detailed and has a certain reference value. Interested friends must read it!

Android

Create a native module package

To create a Java class for your native module package by inheriting from ReactPackage, you can write:

Override createNativeModules and createViewManagers methods

Public class MyNativePackage implements ReactPackage {@ Override public List createNativeModules (ReactApplicationContext reactContext) {} @ Override public List createViewManagers (ReactApplicationContext reactContext) {}}

Add native modules to the createNativeModules method

Public List createNativeModules (ReactApplicationContext reactContext) {List modules = new ArrayList (); modules.add (new MyNativeModule (reactContext)); return modules;}

Add native UI components to the createViewManagers method

Public List createViewManagers (ReactApplicationContext reactContext) {List components = new ArrayList (); components.add (new RNNativeComponent ()); return components;}

Create a native module

First create the MyNativeModule class by inheriting from ReactContextBaseJavaModule.

Public class MyNativeModule extends ReactContextBaseJavaModule {public MyNativeModule (ReactApplicationContext reactContext) {super (reactContext);}}

In order for React Native to find our module in NativeModules, we also need to override the getName method.

@ Overridepublic String getName () {return "MyNativeModule";}

Now that we have a native module that can be imported into JavaScript code, we can add functionality to it.

Expose module method: define a Show method that accepts setting parameters, success callbacks, and failure callbacks.

Public class MyNativeModule extends ReactContextBaseJavaModule {@ ReactMethod public void Show (ReadableMap config, Callback successCallback, Callback cancelCallback) {Activity currentActivity = getCurrentActivity (); if (currentActivity = = null) {cancelCallback.invoke ("Activity doesn't exist"); return;}

Call module method in JavaScript

Import {NativeModules} from 'react-native'const {MyNativeModule} = NativeModulesMyNativeModule.Show ({}, / / Config Parameters () = > {}, / / Success Callback () = > {} / / Cancel Callback)

Note:

Module methods only provide static references and are not included in the react tree.

Create native UI components

If you need to render an acoustic UI component in the react tree

Create a Java class that inherits ReactNative ViewGroupManager

Public class RNNativeComponent extends ViewGroupManager {public static final String REACT_CLASS = "RNNativeComponent";}

Override the getName method:

@ Overridepublic String getName () {return REACT_CLASS;}

Override the createViewInstance method and return your custom native component

@ Override protected FrameLayout createViewInstance (final ThemedReactContext reactContext) {return / / Custom Native components wrapped in FrameLayout}

Create a native prop method

@ ReactProp (name = "prop_name") public void setPropName (NativeComponent nativeComponent, propDataType prop) {}

Used in JavaScript

Import {requireNativeComponent} from "react-native" const MyNativeComponent = requireNativeComponent ("RNNativeComponent", RNNativeComponent, {nativeOnly: {}})

IOS

Macro

RCTBridgeModule: RCTBridgeModule is a protocol that provides an interface for registering the bridge module RCTBridgeModule @ protocol RCTBridgeModule

RCT_EXPORT_MODULE (js_name): use bridge to register your module when class implementation. Parameter js_name is optional and is used as the name of the JS module. If it is not defined, the class name of Objective-C will be used by default.

RCT_EXPORT_METHOD (method) RCT_REMAP_METHOD (, method): the bridge module also defines methods that can be output to JavaScript as NativeModules.ModuleName.methodName.

RCT_EXPORT_METHOD (funcName: (NSString *) onlyString secondName: (NSInteger) argInteger) {.}

The above example reveals that JavaScript is NativeModules.ModuleName.funcName.

Create a native module package

We need to add two files to the project: the header file and the source file.

MyNativePackage.h#import "RCTBridgeModule.h" @ interface MyNativePackage: NSObject @ end- MyNativePackage.m#import "MyNativePackage.h" @ implementation MyNativePackageRCT_EXPORT_MODULE (); @ end

Create module method

RCT_EXPORT_METHOD (Show: (RCTResponseSenderBlock) callback) {}

Introduction of module method into JavaScript

Import {NativeModules} from 'react-native'const MyNativeModule = NativeModules.MyNativeModuleMyNativeModule.Show (() = > {})

Create native View components

Create a view method to return your original sound component

-(UIView *) view {/ / Initialize & return your native component view}

Create a native prop method

RCT_CUSTOM_VIEW_PROPERTY (prop, DATA_TYPE_OF_PROP, YOUR_NATIVE_COMPONENT_CLASS) {}

Use in JavaScript

Import {requireNativeComponent} from "react-native" const MyNativeComponent = requireNativeComponent ("RNNativeComponent", RNNativeComponent, {nativeOnly: {}}) these are all the contents of this article entitled "sample Analysis of react native Native Module bridging". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.