ReactNativeがオリジナルコンポーネントを呼び出す(WebView)
12248 ワード
androidエンジニアリング:
ReactWebViewManager.class(新規)
AnExampleReactPackage.class(新規)
MainApplication.class新規モジュールの追加
js部分
WebView.js(新規)...View.propTypesこれは必ず書かなければなりません.そうしないと、新しいバージョンが間違っています.デフォルトの属性も入っています.
呼び出し:
ReactWebViewManager.class(新規)
public class ReactWebViewManager extends SimpleViewManager {
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");
}
}
AnExampleReactPackage.class(新規)
public class AnExampleReactPackage implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
modules.add(new ToastModule(reactContext));
return modules;
}
@Override
public List createViewManagers(ReactApplicationContext reactContext) {
return Arrays.asList(
new ReactImageManager(),
new ReactWebViewManager()
);
}
}
MainApplication.class新規モジュールの追加
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new AnExampleReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
js部分
WebView.js(新規)...View.propTypesこれは必ず書かなければなりません.そうしないと、新しいバージョンが間違っています.デフォルトの属性も入っています.
import React,{PropTypes} from 'react';
import {requireNativeComponent,View} from 'react-native';
// ...View.propTypes
var iface = {
name: 'WebView',
propTypes: {
url: PropTypes.string,
html: PropTypes.string,
...View.propTypes
},
}
module.exports = requireNativeComponent('RCTWebView', iface,{
nativeOnly:{
"testID": true,
'renderToHardwareTextureAndroid': true,
'accessibilityComponentType': true,
'accessibilityLabel': true,
'importantForAccessibility': true,
'accessibilityLiveRegion': true,
'onLayout':true,
}
});
呼び出し:
var WebView = require('../AndroidNativeModules/WebView');
url="https://www.baidu.com" style={{width:200,height:400}}>