React Native calling native Android components

In today's app There are already thousands of native ui parts-some of which are part of the platform, others may come from some third-party libraries, And maybe you have a lot of your own. react native has encapsulated most of the most common components , such as scrollview textinput app also encapsulates some components, react native certainly can't contain them. Fortunately, in react naitve Encapsulating and embedding existing components in an application is straightforward.

For example, WebView, the official does not provide The Android end of the implementation, then we do now to encapsulate the WebView.

First, I need to inheritSimpleviewmanagerthis generic class, similar to the native module, needs to be rewrittenGetName ()method that willUIcomponent name exposed toJavaScriptlayer, and then you need to rewritecreateviewinstancemethod that returns the native that we need to useUIcomponent instance, here is theWebView. And then exposing some of the necessary properties toJavaScriptlayer, for the sake of simplicity, we only expose two properties here, one isURL, one isHTML, onceJavaScriptlayer has been set upURL, a Web page is loaded, and once you set theHTML, you will load this sectionHTML, and the exposure of the attribute is to use annotations to set the annotation to the correspondingSetmethod, and thenSetmethod is processed in theUIupdates, such as when you set up theURL, inSetUrlThe page will be loaded inside. Ultimately, ourViewmanagerThat's the way it is.

First note the Guide package

followed by the main code

public class Reactwebviewmanager extends Simpleviewmanager<webview> {

public static final String React_class = "Rctwebview";

@Override

Public String GetName () {

return react_class;

}

@Override

Protected WebView createviewinstance (Themedreactcontext reactcontext) {

WebView webview= New WebView (Reactcontext);

Webview.setwebviewclient (New Webviewclient () {

@Override

public boolean shouldoverrideurlloading (WebView view, String URL) {

View.loadurl (URL);

return true;

}

});

return webView;

}

@ReactProp (name = "url")

public void SetUrl (WebView view, @Nullable String URL) {

LOG.E ("TAG", "SetUrl");

View.loadurl (URL);

}

@ReactProp (name = "html")

public void sethtml (WebView view, @Nullable String html) {

LOG.E ("TAG", "sethtml");

View.loaddata (HTML, "text/html; Charset=utf-8 "," UTF-8 ");

}

}

As with native modules, native UI components also need to be registered to implement the reactpackage interface for WebView registration.

Add this reactpackage to the Reactinstancemanager instance, in Mainactivty

Then create a new Webview.js file on the JavaScript layer. Enter the content below

So far, you can already use this WebView component.

var webview=require ('./webview ');

Render:function () {

Return (

<view style={styles.container}>

<webview url= "https://www.baidu.com" style={{width:200,height:400}}></webview>

</View>

);

},

React Native calling native Android components