protected static class ReactWebViewClient extends WebViewClient { //WebViewClient就是我們在寫Android原生代碼時，監(jiān)聽網(wǎng)頁加載情況使用的工具。
 protected static final String REACT_CLASS = "RCTWebView"; //定義的原生組件名，在后面JS中會對應(yīng)到。

 //...

 @Override
 public void onPageStarted(WebView webView, String url, Bitmap favicon) { //有很多回調(diào)方法，此處只舉一例
 super.onPageStarted(webView, url, favicon);
 mLastLoadFailed = false;

 dispatchEvent(
 webView,
 new TopLoadingStartEvent( //自己定義的時間，dispatch后，事件會傳給js
 webView.getId(),
 createWebViewEvent(webView, url)));
 }

 //...
 }

protected static class ReactWebViewClient extends WebViewClient { //WebViewClient就是我們在寫Android原生代碼時，監(jiān)聽網(wǎng)頁加載情況使用的工具。
 protected static final String REACT_CLASS = "RCTWebView"; //定義的原生組件名，在后面JS中會對應(yīng)到。

 //...

 @Override
 public void onPageStarted(WebView webView, String url, Bitmap favicon) { //有很多回調(diào)方法，此處只舉一例
 super.onPageStarted(webView, url, favicon);
 mLastLoadFailed = false;

 dispatchEvent(
 webView,
 new TopLoadingStartEvent( //自己定義的時間，dispatch后，事件會傳給js
 webView.getId(),
 createWebViewEvent(webView, url)));
 }

 @Override
 public void doUpdateVisitedHistory(WebView webView, String url, boolean isReload) { //坑在這，這里就是導(dǎo)航有變化的時候會回調(diào)在這個版本是有這個處理的，但是不知道在哪個版本刪掉了 -.-
 super.doUpdateVisitedHistory(webView, url, isReload);

 dispatchEvent(
 webView,
 new TopLoadingStartEvent(
 webView.getId(),
 createWebViewEvent(webView, url)));
 }

 //...
 }

public class TopLoadingStartEvent extends Event<TopLoadingStartEvent> {
 public static final String EVENT_NAME = "topLoadingStart"; //對應(yīng)方法是onLoadingStart, 因為對RN的結(jié)構(gòu)不熟悉，在此處花了很長時間研究是怎么對應(yīng)的，最后找到了定義對應(yīng)的文件
 private WritableMap mEventData;

 public TopLoadingStartEvent(int viewId, WritableMap eventData) {
 super(viewId);
 mEventData = eventData;
 }

 @Override
 public String getEventName() {
 return EVENT_NAME;
 }

 @Override
 public boolean canCoalesce() {
 return false;
 }

 @Override
 public short getCoalescingKey() {
 // All events for a given view can be coalesced.
 return 0;
 }

 @Override
 public void dispatch(RCTEventEmitter rctEventEmitter) {
 rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mEventData);
 }
}

/**
 * Constants exposed to JS from {@link UIManagerModule}.
 */
/* package */ class UIManagerModuleConstants {

 /* package */ static Map getDirectEventTypeConstants() {
 return MapBuilder.builder()
 .put("topContentSizeChange", MapBuilder.of("registrationName", "onContentSizeChange"))
 .put("topLayout", MapBuilder.of("registrationName", "onLayout"))
 .put("topLoadingError", MapBuilder.of("registrationName", "onLoadingError"))
 .put("topLoadingFinish", MapBuilder.of("registrationName", "onLoadingFinish"))
 .put("topLoadingStart", MapBuilder.of("registrationName", "onLoadingStart"))
 .put("topSelectionChange", MapBuilder.of("registrationName", "onSelectionChange"))
 .put("topMessage", MapBuilder.of("registrationName", "onMessage"))
 .build();
 }
}

class WebView extends React.Component {
 static propTypes = { //給外部定義的可設(shè)置的屬性
 ...ViewPropTypes,
 renderError: PropTypes.func,
 renderLoading: PropTypes.func,
 onLoad: PropTypes.func,
 //...
 }

 render() { //繪制頁面內(nèi)容
 //...
 var webView =
 <RCTWebView
 ref={RCT_WEBVIEW_REF}
 key="webViewKey"
 style={webViewStyles}
 source={resolveAssetSource(source)}
 onLoadingStart={this.onLoadingStart}
 onLoadingFinish={this.onLoadingFinish}
 onLoadingError={this.onLoadingError}/>;

 return (
 <View style={styles.container}>
 {webView}
 {otherView}
 </View>
 );
 }

 onLoadingStart = (event) => {
 var onLoadStart = this.props.onLoadStart;
 onLoadStart && onLoadStart(event);
 this.updateNavigationState(event);
 };

 onLoadingFinish = (event) => {
 var {onLoad, onLoadEnd} = this.props;
 onLoad && onLoad(event);
 onLoadEnd && onLoadEnd(event);
 this.setState({
 viewState: WebViewState.IDLE,
 });
 this.updateNavigationState(event);
 };

 updateNavigationState = (event) => {
 if (this.props.onNavigationStateChange) {
 this.props.onNavigationStateChange(event.nativeEvent);
 }
 };
}

var RCTWebView = requireNativeComponent('RCTWebView', WebView, { //對應(yīng)上面JAVA中的 ‘RCTWebView'
 nativeOnly: { messagingEnabled: PropTypes.bool, }, });


 module.exports = WebView; 

public class ReactWebViewManager extends SimpleViewManager<WebView> {
 protected static final String REACT_CLASS = "RCTWebView1"; //此處修改一下名字

 protected static class ReactWebViewClient extends WebViewClient {
 @Override
 public void doUpdateVisitedHistory(WebView webView, String url, boolean isReload) {
 super.doUpdateVisitedHistory(webView, url, isReload);

 dispatchEvent( //在導(dǎo)航變化的時候，dispatchEvent
 webView,
 new TopCanGoBackEvent(
 webView.getId(),
 createCanGoBackWebViewEvent(webView, url)));
 }
 }
}

public class TopCanGoBackEvent extends Event<TopCanGoBackEvent> {

 public static final String EVENT_NAME = "topChange"; 
 private WritableMap mEventData;

 public TopCanGoBackEvent(int viewId, WritableMap eventData) {
 super(viewId);
 mEventData = eventData;
 }

 @Override
 public String getEventName() {
 return EVENT_NAME;
 }

 @Override
 public boolean canCoalesce() {
 return false;
 }

 @Override
 public short getCoalescingKey() {
 // All events for a given view can be coalesced.
 return 0;
 }

 @Override
 public void dispatch(RCTEventEmitter rctEventEmitter) {
 rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mEventData);
 }
}

public class ReactWebViewPackage implements ReactPackage {

 @Override
 public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

 return Collections.emptyList();
 }

 @Override
 public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
 return Arrays.<ViewManager>asList(
 new ReactWebViewManager()
 );
 }
}

public class MainApplication extends Application implements ReactApplication {
 @Override
 protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
 new MainReactPackage(),
 new ReactWebViewPackage() //WebView
 );
 }
}