Android Kotlin WebView中通过JavascriptInterface实现点击按钮调用navigate

步骤1：配置WebView并启用JS接口 #

首先确保你的WebView已开启JavaScript支持，并绑定自定义的JavaScriptInterface实例：

// 在WebView初始化代码中添加以下配置
webView.settings.javaScriptEnabled = true
// "AndroidInterface"是JS端调用的接口标识，可自定义
webView.addJavascriptInterface(JavaScriptInterface(), "AndroidInterface")

步骤2：调整Kotlin接口方法（处理主线程问题） #

JS接口的回调默认在子线程执行，而navigate涉及UI操作，需切换到主线程：

inner class JavaScriptInterface {
    @JavascriptInterface
    fun register(data: String) {
        // 切换到主线程执行导航逻辑
        runOnUiThread {
            navigate(
                tDirections.actionxnut08EventToEventJoinForm()
            )
        }
    }
}

若你的navigate方法已内部处理主线程逻辑，可省略runOnUiThread包裹。

步骤3：修改JS代码调用安卓接口 #

在onClickButton函数中直接调用WebView注册的安卓接口方法：

const onClickButton = () => {
    // 调用安卓端暴露的register方法，可传入实际业务数据（示例传空字符串）
    AndroidInterface.register("");
}

return (
    <button onClick={() => onClickButton()}></button>
)

关键注意事项 #

• Kotlin接口方法必须添加@JavascriptInterface注解，否则JS无法访问该方法
• JS中调用的接口标识（示例中的AndroidInterface）必须与WebView绑定的名称完全一致
• 若需传递业务数据，可修改register方法的参数，并在JS调用时传入对应值

内容的提问来源于stack exchange，提问作者minsu123