Java与React Native之间传递参数

Java与React Native之间传递参数

React Native作为一种新型的前端开发语言，必然很强大，但难免也有JavaScript无法实现的功能，这就需要和原生语言进行交互。而交互的过程中无非是函数以及参数的传递，官网上对于ReactNative与原生的交互也做了详尽的示例，链接看这里ReactNative官网原生模块

---

参数形式

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

官方提供了这8种参数类型进行原生与ReactNative之间的转换，基本类型的参数传递很简单，利用官方重新定义的CallBack接口的invoke方法可以直接进行传递，而集合与数组却没有明确的示例。

---

观察着8种参数类型发现，其中有ReadableMap 和 ReadableArray类型，对应JavaScript的Object和Array。而在Java原生中，可以发现facebook定义了ReadableArray和ReadableMap接口，一层一层找一下，找到了WritableArray和WritableMap接口，以及实现了他们的WritableNativeArray和WritableNativeMap，我尝试利用WritableNativeArray push了几个参数，成功的传递到了参数：）

java代码

   @ReactMethod
    public void show(int a, int b, Callback callback) {
//        int res = add(a, b);
//        String[] array = {"one", "two", "three"};
        WritableArray writableArray = new WritableNativeArray();
        writableArray.pushString("one");
        writableArray.pushString("two");
        writableArray.pushString("three");
        callback.invoke(writableArray);
    }

ReactNative代码

  MyTest.show(
            43,
            75,
            (result)=> {
                ToastAndroid.show("结果是:" + result[2] + "", ToastAndroid.SHORT);
            }
        );

成功的接收到了传递过来的数组。想必ReadableNativeArray和ReadableNativeMap是负责接收ReactNative传递过来的参数，一个读一个写嘛。

顺便附上利用map来传递参数的方式

java代码

  @ReactMethod
    public void show(int a, int b, Callback callback) {
//        int res = add(a, b);
//        String[] array = {"one", "two", "three"};
//        WritableArray writableArray = new WritableNativeArray();
//        writableArray.pushString("one");
//        writableArray.pushString("two");
//        writableArray.pushString("three");
        WritableMap writableMap = new WritableNativeMap();
        writableMap.putString("1", "first");
        writableMap.putString("2", "second");
        writableMap.putString("3", "third");
        callback.invoke(writableMap);
    }

ReactNative代码

 MyTest.show(
            43,
            75,
            (result)=> {
                ToastAndroid.show("结果是:" + result["2"] + "", ToastAndroid.SHORT);
            }
        );

ReactNative还是很有意思的