這裡原生介面是指用佈局檔案實現或Java程式碼實現view的Activity，React介面是指用ReactJS實現的介面的Activity。

從某種角度看，React只是充當了Android裡的view層，因此原生介面與React介面的相互呼叫及資料傳遞同原生介面之間的互動基本是一致的。

下面是我對兩種介面的相互呼叫和資料傳遞的一種實現嘗試，不一定是最有效率或最佳的，純當練習和探索而已。

一、原生介面呼叫React介面

1.只是啟動React介面的話很簡單，同原生介面間的啟動一樣，直接用startActivity即可。

2.在啟動React介面時傳遞資料給React介面。

先來捋下思路，原生介面啟動是沒問題的，同原生一樣；關鍵是React介面如何獲取到傳遞過來的值：從前面的學習中我們知道原生模組是有很大自由度的，只要能得到React介面所在activity就可以順著得到傳遞的來的intent，而JS端想得到資料就要利用回撥函數了。

接下來是實現思路，從後往前來：首先先要按之前構建原生模組的步驟一步步來構建我們這次需要的功

1. publicclass MyIntentModuleextendsReactContextBaseJavaModule  
2.     @ReactMethod
3.     publicvoid getDataFromIntent(Callback successBack,Callback erroBack){  
4.     try{  
5.         Activity currentActivity = getCurrentActivity();  
6.         String result = currentActivity.getIntent().getStringExtra("result"
   );//會有對應資料放入
7.         if (TextUtils.isEmpty(result)){  
8.             result = "No Data";  
9.     }  
10.     successBack.invoke(result);  
11.     }catch (Exception e){  
12.         erroBack.invoke(e.getMessage());  
13.     }  
14. }  
15. `  
16. ```  
17. publicclassMyReactPackageimplementsReactPackage   
18.     @Override
19.     public List createNativeModules(ReactApplicationContext reactContext) {  
20.         return Arrays.asList(  
21.         new MyIntentModule(reactContext)  
22.     );  
23. }  
24. ```  
25. ```  
26. publicclassMyReactActivityextendsReactActivity  
27.     @Override
28.     protectedListgetPackages(){  
29.         returnArrays.asList(  
30.         newMainReactPackage(),  
31.         newMyReactPackage()  
32.     );  
33. }  
34. ```  
35. 在JS端配置相應程式碼  
36. .......  
37. classmyreactactivity extendsReact.Component{  
38.     constructor(props){  
39.     super(props);//這一句不能省略，照抄即可
40.     this.state={  
41.         TEXT:'Input Text',//這裡放你自己定義的state變數及初始值
42.     };  
43. }  
44.     render(){  
45.     return(  
46.     style={{height:40,borderColor:'gray',borderWidth:1,}}  
47.     onChangeText={(text)=>this.setState({text})}  
48.     value={this.state.TEXT}/>  
49.     )  
50. }  
51.     componentDidMount(){   //這是React的生命週期函式，會在介面載入完成後執行一次
52.     React.NativeModules.MyIntentModule.getDataFromIntent(  
53.     (successMsg)=>{  
54.     this.setState({TEXT:successMsg,}); //狀態改變的話重新繪製介面
55. },  
56. (erroMsg)=>{alert(erroMsg)}  
57. );  
58. }  
59. }  
60. .......  
61. 最後在原生介面將資料存放在intent裡，然後用startActivity啟動；  
62. Intentintent=newIntent(this,MyReactActivity.class);  
63. intent.putExtra("result","haha");  
64. startActivity(intent,10);  
65. 3.原生介面啟動React介面後等待回撥資料。  
66. 在原生應用裡是通過intent來傳遞資料，有 startActivityForResult 和onAcitvityResult來滿足啟動和回撥，回傳資料的用setResult設定intent。  
67. 同上面一樣，由於可以得到當前activity，這些問題也迎刃而解了。  
68. 先在MyIntentModule裡新增方法  
69. @ReactMethod
70. publicvoidfinishActivity(Stringresult){  
71.     ActivitycurrentActivity=getCurrentActivity();  
72.     Intentintent=newIntent();  
73.     intent.putExtra("result",result);  
74.     currentActivity.setResult(11,intent);  
75.     currentActivity.finish();  
76. }  
77. 在JS端配置相應程式碼  
78. React.NativeModules.MyIntentModule.finishActivity(this.state.TEXT);  
79. 至於原生介面裡程式碼就略去不寫了，會安卓的人都可以寫出來了。  
80. 二、React介面呼叫原生介面  
81. 1.只是啟動原生介面  
82. 安卓中啟動activity有隱式和顯式，這裡只考慮顯示啟動。顯式啟動需要指定目的activity的類，而我們雖然可以定製原生模組供JS呼叫，但並不能直接指定類或位元組碼為引數。一些特殊的情況下時可以用swtich的思路來解決，適用性更好的方法有沒有呢，如何用允許的引數來得到目的類呢。這裡就要要到反射了。  
83. 先在MyIntentModule裡新增方法  
84. @ReactMethod
85. publicvoidstartActivityByString(StringactivityName){  
86.     try{  
87.         ActivitycurrentActivity=getCurrentActivity();  
88.         if(null!=currentActivity){  
89.             ClassaimActivity=Class.forName(activityName);  
90.             Intentintent=newIntent(currentActivity,aimActivity);  
91.             currentActivity.startActivity(intent);  
92.         }  
93.     }catch(Exceptione){  
94.         thrownewJSApplicationIllegalArgumentException(  
95.         "Could not open the activity : "+e.getMessage());  
96.     }  
97. }  
98. 在JS裡呼叫  
99. React.NativeModules.MyIntentModule..startActivityByString("com.example.SecondActivity")  
100. 2.啟動原生介面並傳遞進資料  
101. 這和上面相比就是多了幾個引數的事，沒有啥好講的，只是只能傳遞基本資料型別的引數。要想做到和原生一樣在intent裡任意傳遞基本資料和類還做不到，而且要想自己用的方便一點的話還需要再考慮封裝模組方法，在此不贅述。  
102. 3.React介面啟動原生介面後等待回撥資料  
103. 啟動原生介面是同2一樣的，問題在於原生介面返回的資料是在React介面所在Activity的onActvityResult裡接受的，而JS端接受原生模組傳回的資料是通過呼叫原生模組方法時設定的回撥函式接受到的，如何將onActivityResult裡的資料實時傳遞到原生模組裡方法設定的回撥函式裡呢？如果不考慮這些回撥只是把資料存在變數或者檔案裡，用一個類似messageQueue的思路應該可以解決，不過那樣需要可能效率上不太高，我們自己實現起來也不太方便。幸運的是在Java裡已經有BlockingQueue了。  
104. 先在MyReactActivity裡新增程式碼  
105. publicstatic ArrayBlockingQueue myBlockingQueue = new ArrayBlockingQueue(1);  
106.     @Override
107.     publicvoidonActivityResult(intrequestCode,intresultCode,Intentdata){  
108.         super.onActivityResult(requestCode,resultCode,data);  
109.         if(resultCode==RESULT_OK&&requestCode==100){  
110.             Stringresult=data.getStringExtra("result");  
111.         if(！TextUtils.isEmpty(result)){  
112.             MyConstants.myBlockingQueue.add(result);  
113.         }else{  
114.             MyConstants.myBlockingQueue.add("無資料傳回");  
115.     }  
116. }  
117. }else{  
118. MyConstants.myBlockingQueue.add("沒有");  
119. }  
120. }  
121. 在MyIntentModule裡新增方法  
122. @ReactMethod
123. publicvoidstartActivityForResult(StringactivityName,intrequestCode,CallbacksuccessCallback,CallbackerroCallback){  
124.     try{  
125.         ActivitycurrentActivity=getCurrentActivity();  
126.         if(null!=currentActivity){  
127.             ClassaimActivity=Class.forName(activityName);  
128.             Intentintent=newIntent(currentActivity,aimActivity);  
129.             currentActivity.startActivityForResult(intent,requestCode);  
130.             Stringresult=MyConstants.myBlockingQueue.take();  
131.             successCallback.invoke(result);  
132.         }  
133.         }catch(Exceptione){  
134.             erroCallback.invoke(e.getMessage());  
135.             thrownewJSApplicationIllegalArgumentException(  
136.             "Could not open the activity : "+e.getMessage());  
137.     }  
138. }  
139. 在JS端呼叫  
140. React.NativeModules.MyIntentModule.startActivityForResult(  
141.     "com.example.SecondActivity",100,  
142.     (successMsg)=>{  
143.         this.setState({TEXT:successMsg,});  
144.     },  
145.     (erroMsg)=>{alert(erroMsg)}  
146. );  
147. 原生介面的程式碼也要記得寫，不過也沒啥好說的了，按原生安卓一樣就可以了。