RN怎麽與native交互的呢？

下面我們通過一個簡單的Demo來實現：RN頁面調起Native頁面，Native頁面選擇電話本數據，將數據回傳給RN展示。

首先是 Native側

1、MainActivity

1. package com.rnandroid01;
3. import android.content.Intent;
4. import android.database.Cursor;
5. import android.net.Uri;
6. import android.provider.ContactsContract;
8. import com.facebook.react.ReactActivity;
10. public class MainActivity extends ReactActivity {
12. /**
13. * Returns the name of the main component registered from JavaScript.
14. * This is used to schedule rendering of the component.
15. */
16. @Override
17. protected String getMainComponentName() {
18. return "RNAndroid01";
19. }
22. @Override
23. public void onActivityResult(int requestCode, int resultCode, Intent data) {
24. super.onActivityResult(requestCode, resultCode, data);
25. if(requestCode!=200 || resultCode!=RESULT_OK) return;
26. Uri contactData = data.getData();
28. Cursor cursor = managedQuery(contactData, null, null, null, null);
29. cursor.moveToFirst();
30. String num = getContactPhone(cursor);
33. //下面的話 就是將num發送給rn側 需要調用nativeModule對象裏面的方法
35. MainApplication.getMyReactPackage().myNativeModule.sendMsgToRn(num);
37. }
39. //這個是Native代碼，與RN其實沒什麽關系
40. private String getContactPhone(Cursor cursor) {
41. // TODO Auto-generated method stub
42. int phoneColumn = cursor
43. .getColumnIndex(ContactsContract.Contacts.HAS_PHONE_NUMBER);
44. int phoneNum = cursor.getInt(phoneColumn);
45. String result = "";
46. if (phoneNum > 0) {
47. // 獲得聯系人的ID號
48. int idColumn = cursor.getColumnIndex(ContactsContract.Contacts._ID);
49. String contactId = cursor.getString(idColumn);
50. // 獲得聯系人電話的cursor
51. Cursor phone = getContentResolver().query(
52. ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
53. null,
54. ContactsContract.CommonDataKinds.Phone.CONTACT_ID + "="
55. + contactId, null, null);
56. if (phone.moveToFirst()) {
57. for (; !phone.isAfterLast(); phone.moveToNext()) {
58. int index = phone
59. .getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER);
60. int typeindex = phone
61. .getColumnIndex(ContactsContract.CommonDataKinds.Phone.TYPE);
62. int phone_type = phone.getInt(typeindex);
63. String phoneNumber = phone.getString(index);
64. result = phoneNumber;
65. }
66. if (!phone.isClosed()) {
67. phone.close();
68. }
69. }
70. }
71. return result;
72. }
74. }

2、MainApplication

1. package com.rnandroid01;
3. import android.app.Application;
4. import android.util.Log;
6. import com.facebook.react.ReactApplication;
7. import com.facebook.react.ReactInstanceManager;
8. import com.facebook.react.ReactNativeHost;
9. import com.facebook.react.ReactPackage;
10. import com.facebook.react.shell.MainReactPackage;
12. import java.util.Arrays;
13. import java.util.List;
15. public class MainApplication extends Application implements ReactApplication {
18. private static final MyReactPackage myReactPackage=new MyReactPackage();
20. public static MyReactPackage getMyReactPackage() {
21. return myReactPackage;
22. }
24. private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
25. @Override
26. protected boolean getUseDeveloperSupport() {
27. return BuildConfig.DEBUG;
28. }
30. @Override
31. protected List<ReactPackage> getPackages() {
32. return Arrays.<ReactPackage>asList(
33. new MainReactPackage(),
34. myReactPackage
35. );
36. }
37. };
39. @Override
40. public ReactNativeHost getReactNativeHost() {
41. return mReactNativeHost;
42. }
43. }

3、MyReactPackage

1. package com.rnandroid01;
3. import com.facebook.react.ReactPackage;
4. import com.facebook.react.bridge.JavaScriptModule;
5. import com.facebook.react.bridge.NativeModule;
6. import com.facebook.react.bridge.ReactApplicationContext;
7. import com.facebook.react.uimanager.ViewManager;
9. import java.util.ArrayList;
10. import java.util.Collections;
11. import java.util.List;
13. public class MyReactPackage implements ReactPackage {
15. public MyNativeModule myNativeModule;
17. @Override
18. public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
19. List<NativeModule> modules=new ArrayList<>();
20. myNativeModule=new MyNativeModule(reactContext);
21. modules.add(myNativeModule);
22. return modules;
23. }
25. @Override
26. public List<Class<? extends JavaScriptModule>> createJSModules() {
27. return Collections.emptyList();
28. }
30. @Override
31. public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
32. return Collections.emptyList();
33. }
34. }

4、MyNativeModule

1. package com.rnandroid01;
3. import android.content.Context;
4. import android.content.Intent;
5. import android.os.Bundle;
6. import android.provider.ContactsContract;
7. import android.widget.Toast;
9. import com.facebook.react.bridge.ReactApplicationContext;
10. import com.facebook.react.bridge.ReactContextBaseJavaModule;
11. import com.facebook.react.bridge.ReactMethod;
12. import com.facebook.react.modules.core.DeviceEventManagerModule;
15. public class MyNativeModule extends ReactContextBaseJavaModule {
17. private ReactApplicationContext mContext;
19. public MyNativeModule(ReactApplicationContext reactContext) {
20. super(reactContext);
22. mContext = reactContext;
23. }
25. @Override
26. public String getName() {
27. //一定要有這個名字的 在rn代碼裏面是需要這個名字來調用該類的方法的
28. return "MyNativeModule";
29. }
31. //函數不能有返回值，因為被調用的原生代碼是異步的，原生代碼執行結束之後只能通過回調函數或者發送消息給rn那邊
33. //有一個錯誤
35. @ReactMethod
36. public void rnCallNative(String msg) {
37. Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
40. // Intent intent = new Intent(mContext, MyActivity.class);
41. // intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);//一定要加上這句 否則報錯
42. // mContext.startActivity(intent);
45. Intent intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);
46. Bundle bundle = new Bundle();
47. mContext.startActivityForResult(intent,200,bundle);
50. }
52. public void sendMsgToRn(String msg){
53. //將消息msg發送給RN側
54. mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("AndroidToRNMessage",msg);
56. }
58. }

在RN側

1. /**
2. * Sample React Native App
3. * https://github.com/facebook/react-native
4. * @flow
5. */
7. import React, { Component } from ‘react‘;
8. import {
9. AppRegistry,
10. StyleSheet,
11. Text,
12. NativeModules,
13. DeviceEventEmitter,
14. View
15. } from ‘react-native‘;
17. class RNAndroid01 extends Component {
20. componentWillMount(){
21. DeviceEventEmitter.addListener(‘AndroidToRNMessage‘,this.handleAndroidMessage);
22. }
24. componentWillunMount(){
25. DeviceEventEmitter.remove(‘AndroidToRNMessage‘,this.handleAndroidMessage);
26. }
29. handleAndroidMessage=(msg)=>{
30. //RN端獲得native端傳遞的數據
31. console.log(msg);
32. }
35. render() {
36. return (
37. <View style={styles.container}>
38. <Text style={styles.welcome}
39. onPress={this.CallAndroid}
40. >
41. Welcome to React Native!RN與Android的通信
42. </Text>
43. <Text style={styles.instructions}>
44. To get started, edit index.android.js
45. </Text>
46. <Text style={styles.instructions}>
47. Shake or press menu button for dev menu
48. </Text>
49. </View>
50. );
51. }
54. CallAndroid=()=>{
55. NativeModules.MyNativeModule.rnCallNative(‘rn調用原生模塊的方法-成功啦‘);
56. }
57. }

上面的例子實現了RN與Native端的交互及數據傳遞。

重點使用了React Native的RCTDeviceEventEmitter，通過消息機制來實現。

好了，RN與native的交互還可以通過Promise和Callback回調方式實現，我們下篇文章再看。

引用原文：http://blog.csdn.net/codetomylaw/article/details/51926421

寫博客是為了記住自己容易忘記的東西，另外也是對自己工作的總結，文章可以轉載，無需版權。希望盡自己的努力，做到更好，大家一起努力進步！

如果有什麽問題，歡迎大家一起探討，代碼如有問題，歡迎各位大神指正！

《React-Native系列》RN與native交互與數據傳遞