点击Android按钮跳转到React-native指定界面

原文地址：http://blog.csdn.net/jiaweihaoku/article/details/53259596

 这是一遍关于Android与ReactNative混合开发的探讨文章。

我们项目出现了一个需求，就是点击原生的android按钮跳转到指定的reactNative界面，关于这方面，在网上我是没有找到任何资料，只有通过自己摸索，终于找到了一条走的通的路，如果有大神有更好的办法，可以留言教教我。互相学习进步。

我想到的办法就是点击Android原生按钮向rn传值，rn再通过这个值来跳转到指定的界面。

首先是android跳转rn并传值：

第一步写一个类继承ReactContextBaseJavaModule如下：

[java]  view plain  copy

1. public class IntentModule  extends ReactContextBaseJavaModule {  
2.   
3.     public IntentModule(ReactApplicationContext reactContext) {  
4.         super(reactContext);  
5.     }  
6.   
7.     @Override  
8.     public String getName() {  
9.         return "IntentModule";  
10.     }  
11.       
12.     @ReactMethod  
13.     public void dataToJS(Callback successBack, Callback errorBack){  
14.         try{  
15.             Activity currentActivity = getCurrentActivity();  
16.             String result = currentActivity.getIntent().getStringExtra("data");  
17.             if (TextUtils.isEmpty(result)){  
18.                 result = "没有数据";  
19.             }  
20.             successBack.invoke(result);  
21.         }catch (Exception e){  
22.             errorBack.invoke(e.getMessage());  
23.         }  
24.     }  
25. }  

要注意的是getName方法必须重写

然后再写一个类将这个方法暴露出去，让rn可以调用：

[java]  view plain  copy

1. ublic class AnDataReactPackage implements ReactPackage{  
2.     @Override  
3.     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {  
4.         List<NativeModule> modules = new ArrayList<>();  
5.         modules.add(new IntentModule(reactContext));  
6.         return modules;  
7.     }  
8.   
9.     @Override  
10.     public List<Class<? extends JavaScriptModule>> createJSModules() {  
11.         return Collections.emptyList();  
12.     }  
13.   
14.     @Override  
15.     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {  
16.         return Collections.emptyList();  
17.     }  
18. }  

最后在MainApplication中注册这个类：

[java]  view plain  copy

1.  protected List<ReactPackage> getPackages() {  
2.         return Arrays.<ReactPackage>asList(  
3.                 new MainReactPackage(),  
4.                 new AnDataReactPackage()  
5.         );  
6.     }  
7. };  

之后就可以在rn中拿到activity跳转传递的值，值的传递跟普通activity之间的跳转没有差别：

[javascript]  view plain  copy

1. getData() {  
2.       NativeModules.IntentModule.dataToJS((msg) => {  
3.               console.log(msg);  
4.               let base = require('./constant');  
5.               base.columnID = msg;  
6.               //ToastAndroid.show('JS界面:从Activity中传输过来的数据为:' + base.columnID, ToastAndroid.SHORT);  
7.           },  
8.           (result) => {  
9.               ToastAndroid.show('JS界面:错误信息为:' + result, ToastAndroid.SHORT);  
10.           })  
11.   }  

从上面的代码中可以看到我拿到这个值之后存在了常量类里，就是通过这个常量来实现跳转到不同的界面，之后的事情就迎刃而解了：

[java]  view plain  copy

1. componentDidMount() {  
2.       let base = require('./constant');  
3.       //ToastAndroid.show(base.columnID, ToastAndroid.SHORT);  
4.       let id = base.columnID;  
5.       if (id == "3") {  
6.           const { navigator } = this.props;  
7.           if (navigator) {  
8.               navigator.push({  
9.                   name: 'secondPage',  
10.                   component: secondPage,  
11.               })  
12.           }  
13.       }  if (id == "4") {  
14.           const { navigator } = this.props;  
15.           if (navigator) {  
16.               navigator.push({  
17.                   name: 'otherPage',  
18.                   component: otherPage,  
19.               })  
20.           }  
21.       }  
22.   }