如何在React Native上获取设备的ip？

在React Native上获取设备的IP地址可以通过以下步骤实现：

导入所需的依赖库：import { NativeModules } from 'react-native';
调用原生模块获取设备的IP地址：const { DeviceInfo } = NativeModules; DeviceInfo.getIPAddress((ipAddress) => { console.log(ipAddress); });
创建一个原生模块（Native Module）来实现获取IP地址的功能：
- 在React Native项目的android/app/src/main/java/com/yourprojectname/目录下创建一个名为DeviceInfoModule.java的文件，内容如下：package com.yourprojectname;

 import android.content.Context;

 import android.net.wifi.WifiInfo;

 import android.net.wifi.WifiManager;

 import com.facebook.react.bridge.ReactApplicationContext;

 import com.facebook.react.bridge.ReactContextBaseJavaModule;

 import com.facebook.react.bridge.ReactMethod;

 public class DeviceInfoModule extends ReactContextBaseJavaModule {

     private final ReactApplicationContext reactContext;

     public DeviceInfoModule(ReactApplicationContext reactContext) {

         super(reactContext);

         this.reactContext = reactContext;

     @Override

     public String getName() {

         return "DeviceInfo";

     @ReactMethod

     public void getIPAddress(Callback callback) {

         WifiManager wifiManager = (WifiManager) reactContext.getApplicationContext().getSystemService(Context.WIFI_SERVICE);

         WifiInfo wifiInfo = wifiManager.getConnectionInfo();

         int ipAddress = wifiInfo.getIpAddress();

         String ip = String.format("%d.%d.%d.%d",

                 (ipAddress & 0xff),

                 (ipAddress >> 8 & 0xff),

                 (ipAddress >> 16 & 0xff),

                 (ipAddress >> 24 & 0xff));

         callback.invoke(ip);

```

在React Native项目的android/app/src/main/java/com/yourprojectname/目录下创建一个名为DeviceInfoPackage.java的文件，内容如下：package com.yourprojectname;

 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 DeviceInfoPackage implements ReactPackage {

     @Override

     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

         List<NativeModule> modules = new ArrayList<>();

         modules.add(new DeviceInfoModule(reactContext));

         return modules;

     @Override

     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

         return Collections.emptyList();

```

在React Native项目的android/app/src/main/java/com/yourprojectname/目录下创建一个名为MainApplication.java的文件，找到getPackages方法并添加以下代码：import com.yourprojectname.DeviceInfoPackage; // 导入DeviceInfoPackage

 // ...

 @Override

 protected List<ReactPackage> getPackages() {

     @SuppressWarnings("UnnecessaryLocalVariable")

     List<ReactPackage> packages = new PackageList(this).getPackages();

     packages.add(new DeviceInfoPackage()); // 添加DeviceInfoPackage

     return packages;

```

现在，你可以在React Native应用程序中调用DeviceInfo.getIPAddress方法来获取设备的IP地址。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云