Question

我正在尝试实现一种解决方案，以使用React-Native调用“ pagseguro” SDK进行付款。

我已经完成并使用带有React Native的Native Modules来完成所有过程，并且效果很好，但是在事务处理过程中，有一个侦听器，它发送消息来指导用户如何进行操作（类似“等等。），所以我尝试调用RCTDeviceEventEmitter将此消息发送给JS并显示给用户，但是它仅在操作的最后发送，而不是在创建时实时发送。

我的JS代码：

 state = {
    calling: "",
    error: ""
  };

  onPress = () => {
    // const request = {
    //   paymentType: RNPlugPag.PAYMENT_CREDIT,
    //   installments: 5,
    //   code: "RNPlugPag",
    //   amount: "123,45"
    // };
    NativeModules.RNBPlugPag.doCreditPayment(
      error => {
        this.setState({ calling: error });
      },
      response => {
        this.setState({ calling: response });
      }
    );

    // alert(response);
  };

  componentDidMount = () => {
    const teste = new NativeEventEmitter(NativeModules.RNBPlugPag);
    teste.addListener("paymentEvent", event => this.setState({ error: event }));
    // DeviceEventEmitter.addListener("paymentEvent", event =>
    //   this.setState({ error: event })
    // );
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <TouchableOpacity
          onPress={() => this.onPress()}
          style={{
            backgroundColor: "blue",
            width: 120,
            height: 60,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Text style={{ fontSize: 20, color: "yellow" }}>Clique</Text>
        </TouchableOpacity>
        <Text style={{ fontSize: 20 }}>{this.state.calling}</Text>
        <Text style={{ fontSize: 20 }}>{this.state.error}</Text>
      </View>

我的Java代码：

 @ReactMethod
    public void doCreditPayment(Callback error, Callback response) {
        try {
            // WritableMap map = Arguments.createMap();

            PlugPagPaymentData paymentData = new PlugPagPaymentData(PlugPag.TYPE_CREDITO, 110,
                    PlugPag.INSTALLMENT_TYPE_A_VISTA, 1, "APPDEMO");

            PlugPagAppIdentification appIdentification = new PlugPagAppIdentification("MeuApp", "1.0.7");

            PlugPag plugpag = new PlugPag(reactContext, appIdentification);

            PlugPagInitializationResult result = plugpag
                    .initializeAndActivatePinpad(new PlugPagActivationData("403938"));

            if (result.getResult() == PlugPag.RET_OK) {

                plugpag.setEventListener(plugPagEventData -> {

                    emitDeviceEvent(plugPagEventData.getCustomMessage());

                });


                PlugPagTransactionResult transResult = plugpag.doPayment(paymentData);

                if (transResult.getResult() == PlugPag.RET_OK) {
                    response.invoke(transResult.getTransactionCode());
                } else {
                    error.invoke(transResult.getMessage());
                }

                // Log.i("GET", "GET " + transResult);

            } else {
                error.invoke(RETURN_ERROR);
            }


        } catch (IllegalViewOperationException e) {
            error.invoke(E_LAYOUT_ERROR);
        }

    }

    private void emitDeviceEvent(String message) {
        Log.i("GET", "GET " + message);
        // A method for emitting from the native side to JS
        // https://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("paymentEvent", message);
    }

我想在设置"plugpag.setEventListener"方法并将其发送消息到"emitDeviceEvent"时，即使"doCreditPayment"中的整个操作是自动的，它也会自动发送到JS侦听器并更新状态还没结束

Answer 1

您不需要设置回调错误和响应参数，您可以将事件监听器直接添加到if else语句中

> @ReactMethod
>     public void doCreditPayment() {
>         try {
>             // WritableMap map = Arguments.createMap();
> 
>             PlugPagPaymentData paymentData = new PlugPagPaymentData(PlugPag.TYPE_CREDITO, 110,
>                     PlugPag.INSTALLMENT_TYPE_A_VISTA, 1, "APPDEMO");
> 
>             PlugPagAppIdentification appIdentification = new PlugPagAppIdentification("MeuApp", "1.0.7");
> 
>             PlugPag plugpag = new PlugPag(reactContext, appIdentification);
> 
>             PlugPagInitializationResult result = plugpag
>                     .initializeAndActivatePinpad(new PlugPagActivationData("403938"));
> 
>             if (result.getResult() == PlugPag.RET_OK) {
> 
>                 plugpag.setEventListener(plugPagEventData -> {
>                    // you can add another listener here
                   }
> 
> 
>                 PlugPagTransactionResult transResult = plugpag.doPayment(paymentData);
> 
>                 if (transResult.getResult() == PlugPag.RET_OK) {
>                     //response.invoke(transResult.getTransactionCode());
>                     emitDeviceEvent("SuccessPayment", transResult.getTransactionCode());
> 
>                 });
>                 } else {
>                     //error.invoke(transResult.getMessage());
>                     emitDeviceEvent("ErrorPayment", transResult.getMessage());
> 
>                 });
>                 }
> 
>                 // Log.i("GET", "GET " + transResult);
> 
>             } else {
>                 error.invoke(RETURN_ERROR);
>             }
> 
> 
>         } catch (IllegalViewOperationException e) {
>             error.invoke(E_LAYOUT_ERROR);
>         }
> 
>     }
> 
>     private void emitDeviceEvent(String eventName, String message) {
>         Log.i("GET", "GET " + message);
>         // A method for emitting from the native side to JS
>         // https://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript
>         reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,
> message);
>     }

以及您的反应本机部分

 onPress = () => {

    NativeModules.RNBPlugPag.doCreditPayment()

};

  componentDidMount = () => {
    //const teste = new NativeEventEmitter(NativeModules.RNBPlugPag);
   // teste.addListener("SuccessPayment", event => this.setState({ error: event //}));
     DeviceEventEmitter.addListener("SuccessPayment", event =>
       this.setState({ success: event })
     );

     DeviceEventEmitter.addListener("ErrorPayment", event =>
       this.setState({ error: event })
     );   };

从android调用Native模块并将事件从该模块发送到React Native

1 个答案: