使用 Expo 在 React Native 中启动自定义活动

Question

我目前正在使用 Expo 构建的 React Native 应用程序，我希望集成 Braintree SDK Drop-in UI 组件来创建结账部分。不幸的是，我无法找到一种方法来启动单击按钮的活动，该活动使用从 React Native 应用程序传递的参数打开本机嵌入式 UI。

我尝试了多种替代方案，第一个是编写一个 Expo 模块。我设法将数据传递到 Expo 模块，但无法从 Expo 模块内启动活动。我尝试的另一种选择是编写一个活动并将其添加到

AndroidManifest.xml

文件中，然后尝试使用

Expo Intent-Launcher

中的 startAsyncActivity 方法启动该活动，但我也无法让它工作.

Answer 1

实际上，我通过创建本地 Expo 模块（使用

npx create-expo-module@latest --local

）、添加带有按钮的视图来解决这个问题，当单击按钮时，我使用给定的上下文创建一个新的意图，并启动自定义活动。您可以在下面找到一些代码示例：

我的模块.kt

package expo.modules.mymodule

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyModule")

    View(MyModuleView::class) {}
  }
}

MyModuleView.kt

package expo.modules.mymodule

import android.util.Log
import android.content.Context
import android.content.Intent
import android.util.TypedValue
import android.view.Gravity
import android.widget.Button
import expo.modules.mymodule.MyActivity
import expo.modules.kotlin.AppContext
import expo.modules.kotlin.views.ExpoView

class MyModuleView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
  internal val helloButton = Button(context).also {
    addView(it)
    it.text = "Checkout"
    it.layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
    it.setOnClickListener {
      val myIntent = Intent(context, MyActivity::class.java)
      context.startActivity(myIntent);
    }
  }
}

我的活动.kt

package expo.modules.mymodule

import android.os.Bundle
import android.util.Log
import android.widget.Toast
import androidx.fragment.app.FragmentActivity
import com.braintreepayments.api.DropInClient
import com.braintreepayments.api.DropInListener
import com.braintreepayments.api.DropInRequest
import com.braintreepayments.api.DropInResult

import java.lang.Exception

class MyActivity : FragmentActivity(), DropInListener {
    private var dropInClient: DropInClient? = null;
    private var dropInRequest: DropInRequest? = null;

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        dropInRequest = DropInRequest();
        dropInClient = DropInClient(this@MyActivity,"authorization_token");
        dropInClient!!.setListener(this@MyActivity);
    }

    override fun onStart() {
        super.onStart()
        dropInClient!!.launchDropIn(dropInRequest)
    }

    override fun onDropInSuccess(dropInResult: DropInResult) {
        val token = dropInResult.paymentMethodNonce!!.string;
        Log.d("TestApplication",token);
    }

    override fun onDropInFailure(error: Exception) {
        Log.d("TestApplication",error.toString());
    }
}

此外，为了将本地模块集成到 React Native 应用程序中，我在我的

package.json

中添加了以下几行：

  "private": true,
  "expo": {
    "autolinking": {
      "nativeModulesDir": "./modules"
    }
  }