如何在Android应用中实现原生代码与JavaScript的交互调用？

Android 原生调用 JavaScript

在现代移动应用开发中，Android 和 JavaScript 之间的交互变得越来越重要，通过将两者结合，可以实现更加丰富和动态的用户界面以及更高效的跨平台开发，本文将详细介绍如何在 Android 原生应用中调用 JavaScript 代码，并展示一些常见的应用场景和实现方法。

1、

2、准备工作

3、使用 WebView 调用 JavaScript

4、使用 React Native 调用 JavaScript

5、常见问题及解决方案

6、归纳

在 Android 应用中调用 JavaScript 通常是为了实现以下几种需求：

动态更新 UI: 通过 JavaScript 动态更新 Web 页面的内容。

与 Web 页面交互: Android 应用需要与嵌入的 Web 页面进行数据交换。

执行特定脚本: 在特定时机执行预定义的 JavaScript 脚本。

为了实现这些需求，开发者通常会使用 Android 提供的WebView 组件或者借助跨平台框架如 React Native。

准备工作

在开始之前，确保你已经设置好 Android 开发环境，包括安装 Android Studio 和配置好必要的依赖项。

添加权限

如果你的应用需要访问网络资源（例如加载外部网页），需要在AndroidManifest.xml 文件中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

初始化 WebView

在你的布局文件（例如activity_main.xml）中添加一个WebView 组件：

如何在Android应用中实现原生代码与JavaScript的交互调用？

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在你的活动（Activity）或片段（Fragment）中初始化这个WebView：

WebView webView = findViewById(R.id.webview);

3. 使用 WebView 调用 JavaScript

加载本地 HTML 文件

你可以直接加载本地的 HTML 文件到WebView 中：

webView.loadUrl("file:///android_asset/mypage.html");

确保你的 HTML 文件放在assets 目录下。

加载远程网页

你也可以加载远程的网页：

webView.loadUrl("https://www.example.com");

启用 JavaScript

默认情况下，WebView 是禁用 JavaScript 的，你需要显式启用它：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

调用 JavaScript 函数

你可以使用evaluateJavascript 方法来调用 JavaScript 函数：

webView.evaluateJavascript("javascript:myFunction('Hello from Android!')", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 处理 JavaScript 返回的结果
        Log.d("WebView", "JavaScript returned: " + value);
    }
});

在这个例子中，myFunction 是你在 HTML 文件中定义的一个 JavaScript 函数。

从 JavaScript 调用 Android 代码

你可以通过addJavascriptInterface 方法让 JavaScript 调用 Android 的方法：

webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}, "Android");

然后在 JavaScript 中调用：

<script type="text/javascript">
    function callAndroid() {
        Android.showToast("Hello from JavaScript!");
    }
</script>

4. 使用 React Native 调用 JavaScript

React Native 是一个流行的跨平台移动应用开发框架，允许开发者使用 JavaScript 编写原生应用，在 React Native 中，你可以轻松地在原生代码和 JavaScript 之间进行互操作。

创建 React Native 项目

如何在Android应用中实现原生代码与JavaScript的交互调用？

创建一个新的 React Native 项目：

npx react-native init MyProject

修改原生模块以调用 JavaScript

假设你已经有一个基本的 React Native 应用，并且想要从 Android 原生代码中调用 JavaScript，你需要创建一个自定义的 React Context 并在原生代码中使用它。

Step 1: 创建上下文

在你的 React Native 项目中，创建一个上下文模块（例如MyContext.js）：

import React, { createContext, useContext } from 'react';
const MyContext = createContext();
export const MyProvider = ({ children }) => {
    return <MyContext.Provider value={{ someMethod: () => console.log("Called from native!") }}>{children} />;
};
export const useMyContext = () => useContext(MyContext);

在你的主组件中使用这个上下文：

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { MyProvider } from './MyContext';
const App = () => {
    return (
        <MyProvider>
            <SafeAreaView style={styles.container}>
                {/* 你的其他组件 */}
            </SafeAreaView>
        </MyProvider>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});
export default App;

Step 2: 修改 MainApplication.java

在你的 Android 项目中，找到MainApplication.java 文件，并添加对 React 实例的引用：

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
        
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage()
                // 可以在这里添加其他包，比如第三方库
            );
        }
        
        @Override
        protected String getJSMainModuleName() {
            return "index"; // 确保这里指向你的入口文件名
        }
    };
    
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

Step 3: 从原生代码调用 JavaScript

现在你可以在原生代码中调用 JavaScript：

ReactInstanceManager reactInstanceManager = ((MainApplication) getApplication()).getReactNativeHost().getReactInstanceManager();
reactInstanceManager.getCurrentReactContext()
    .getJSModule(MyContext.class)
    .someMethod(); // 这将触发你在 MyContext.js 中定义的方法