如何在React Native中引入Android Gradle依赖及自定义Java Wi-Fi库

没问题，我帮你梳理下把自定义Java Wi-Fi库接入React Native的完整步骤，亲测可行，一步步来：

一、准备工作 #

• 你的React Native项目（确保已经能正常编译运行Android端）
• 自定义Java Wi-Fi库的aar或jar文件
• Android Studio（方便调试原生代码和同步依赖）

二、将自定义Wi-Fi库导入Android项目 #

1. 把你的Wi-Fi库文件（比如WiFiLib.aar）放到项目的android/app/libs目录下——如果没有libs文件夹，直接新建一个就行。
2. 打开android/app/build.gradle，在dependencies块里添加依赖：

   // 如果是aar包
   implementation files('libs/WiFiLib.aar')
   // 如果是jar包
   implementation files('libs/WiFiLib.jar')
   

3. 点击Android Studio的「Sync Now」按钮，同步Gradle依赖，确保库能正常引入，没有报错。

三、创建React Native原生桥接模块（核心） #

这一步是打通RN和Java库的关键，需要写两个Java类：一个封装Wi-Fi库方法的Module，一个注册Module的Package。

1. 编写WiFiModule类 #

创建路径：android/app/src/main/java/com/你的项目包名/WiFiModule.java

package com.你的项目包名;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
// 导入你的自定义Wi-Fi库核心类
import com.your.wifi.library.CustomWiFiManager;

public class WiFiModule extends ReactContextBaseJavaModule {
    private CustomWiFiManager customWiFiManager;

    // 初始化模块时同时初始化自定义Wi-Fi库
    public WiFiModule(ReactApplicationContext reactContext) {
        super(reactContext);
        customWiFiManager = new CustomWiFiManager(reactContext);
    }

    // 必须实现：返回模块名称，RN端会用这个名字调用方法
    @Override
    public String getName() {
        return "WiFiModule";
    }

    // 封装「连接Wi-Fi」方法，用@ReactMethod标记让RN能调用，Promise用于异步返回结果
    @ReactMethod
    public void connectToWiFi(String ssid, String password, Promise promise) {
        try {
            boolean isConnected = customWiFiManager.connect(ssid, password);
            if (isConnected) {
                promise.resolve("Wi-Fi连接成功");
            } else {
                promise.reject("CONNECT_FAILED", "连接失败，请检查SSID和密码");
            }
        } catch (Exception e) {
            promise.reject("ERROR", e.getMessage());
        }
    }

    // 封装「获取Wi-Fi数据」方法
    @ReactMethod
    public void getWiFiData(Promise promise) {
        try {
            String data = customWiFiManager.fetchDeviceData();
            promise.resolve(data);
        } catch (Exception e) {
            promise.reject("FETCH_FAILED", e.getMessage());
        }
    }

    // 可以根据需求继续封装其他方法，比如断开连接、扫描Wi-Fi列表等
}

2. 编写WiFiPackage类（注册Module） #

创建路径：android/app/src/main/java/com/你的项目包名/WiFiPackage.java

package com.你的项目包名;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class WiFiPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        // 把刚才写的WiFiModule添加进去
        modules.add(new WiFiModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList(); // 我们不需要自定义UI组件，返回空列表即可
    }
}

3. 在MainApplication中注册Package #

打开android/app/src/main/java/com/你的项目包名/MainApplication.java，找到getPackages方法，添加我们的WiFiPackage：

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 新增这一行，注册我们的Wi-Fi模块
    packages.add(new WiFiPackage());
    return packages;
}

四、在React Native中调用原生模块 #

可以封装一个JS工具类，让调用更方便：

// 比如创建src/utils/WiFiHelper.js
import { NativeModules, PermissionsAndroid } from 'react-native';

const { WiFiModule } = NativeModules;

// 动态申请Android权限（6.0+必须）
export const requestWiFiPermissions = async () => {
  try {
    const granted = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      PermissionsAndroid.PERMISSIONS.CHANGE_WIFI_STATE,
      PermissionsAndroid.PERMISSIONS.ACCESS_WIFI_STATE,
    ]);
    return Object.values(granted).every(grant => grant === PermissionsAndroid.RESULTS.GRANTED);
  } catch (err) {
    console.warn('权限申请出错:', err);
    return false;
  }
};

// 调用原生的连接Wi-Fi方法
export const connectToWiFi = async (ssid, password) => {
  try {
    const result = await WiFiModule.connectToWiFi(ssid, password);
    return result;
  } catch (error) {
    console.error('Wi-Fi连接失败:', error);
    throw error;
  }
};

// 调用原生的获取Wi-Fi数据方法
export const getWiFiData = async () => {
  try {
    const data = await WiFiModule.getWiFiData();
    return data;
  } catch (error) {
    console.error('获取Wi-Fi数据失败:', error);
    throw error;
  }
};

然后在RN组件里使用：

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import { requestWiFiPermissions, connectToWiFi, getWiFiData } from './src/utils/WiFiHelper';

const App = () => {
  const [ssid, setSsid] = useState('');
  const [password, setPassword] = useState('');
  const [status, setStatus] = useState('');
  const [wifiData, setWifiData] = useState('');

  const handleConnect = async () => {
    // 先申请权限
    const hasPermission = await requestWiFiPermissions();
    if (!hasPermission) {
      setStatus('请授予Wi-Fi和位置权限');
      return;
    }
    // 执行连接
    try {
      const result = await connectToWiFi(ssid, password);
      setStatus(result);
    } catch (err) {
      setStatus(err.message);
    }
  };

  const handleFetchData = async () => {
    try {
      const data = await getWiFiData();
      setWifiData(data);
    } catch (err) {
      setWifiData(err.message);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="输入Wi-Fi SSID"
        value={ssid}
        onChangeText={setSsid}
      />
      <TextInput
        style={styles.input}
        placeholder="输入Wi-Fi密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="连接Wi-Fi" onPress={handleConnect} />
      <Text style={styles.statusText}>连接状态: {status}</Text>
      <Button title="获取Wi-Fi数据" onPress={handleFetchData} />
      <Text style={styles.dataText}>获取到的数据: {wifiData}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 15,
    marginTop: 50,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
  statusText: {
    marginTop: 10,
    fontSize: 16,
  },
  dataText: {
    marginTop: 10,
    fontSize: 14,
    color: '#333',
  },
});

export default App;

五、配置Android权限 #

打开android/app/src/main/AndroidManifest.xml，添加必要的权限：

<!-- Wi-Fi基础权限 -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- Android 6.0+扫描/连接Wi-Fi需要位置权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

六、调试与排错 #

• 如果原生代码报错，直接用Android Studio打开项目的android目录，断点调试Java代码即可
• RN端可以用react-native log-android命令查看原生日志输出
• 注意自定义Wi-Fi库的上下文传递是否正确（比如构造函数里的reactContext）
• 所有异步方法必须用Promise返回结果，RN和原生之间是异步通信，不能直接同步返回

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