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還是很有意思的