真机调试React Native应用时，如何通过代码获取主机IP地址？

方法一：通过原生iOS模块读取IP.txt文件 #

React Native构建生成的IP.txt会被嵌入iOS应用的主bundle中，我们可以通过自定义原生模块读取该文件内容，并暴露给JavaScript调用。

1. 创建iOS原生模块（Swift版本）

在你的iOS项目中新建RNIPModule.swift文件，添加以下代码：

import Foundation
import React

@objc(RNIPModule)
class RNIPModule: NSObject, RCTBridgeModule {
    // 模块名称，JS端将通过此名称调用
    static func moduleName() -> String! {
        return "RNIPModule"
    }

    // 标记是否需要在主线程初始化
    static func requiresMainQueueSetup() -> Bool {
        return true
    }

    // 暴露给JS的异步方法，读取IP.txt内容
    @objc func getLocalIP(_ resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) {
        guard let filePath = Bundle.main.path(forResource: "IP", ofType: "txt") else {
            reject("IP_FILE_MISSING", "IP.txt未在bundle中找到", nil)
            return
        }
        do {
            let ipAddress = try String(contentsOfFile: filePath, encoding: .utf8)
                .trimmingCharacters(in: .whitespacesAndNewlines)
            resolve(ipAddress)
        } catch {
            reject("IP_READ_FAILED", "读取IP.txt失败", error)
        }
    }
}

2. 配置桥接文件

如果你的项目还没有桥接文件（[项目名]-Bridging-Header.h），需要创建并添加以下内容：

#import <React/RCTBridgeModule.h>

确保Xcode项目的Build Settings中，Objective-C Bridging Header路径指向该文件。

3. JavaScript端调用

在JS代码中通过NativeModules调用原生方法：

import { NativeModules } from 'react-native';

const { RNIPModule } = NativeModules;

// 获取API基础地址的示例函数
async function getApiBaseUrl() {
    try {
        const localIp = await RNIPModule.getLocalIP();
        return `http://${localIp}:3000/api`; // 替换为你的API端口和路径
    } catch (error) {
        console.error('获取本地IP失败:', error);
        // 可选：添加降级方案
        return 'http://localhost:3000/api';
    }
}

方法二：构建时自动生成IP配置文件（纯JS方案） #

如果不想编写原生代码，可以通过预构建脚本读取本地IP并生成JS配置文件，确保和React Native构建使用的IP一致。

1. 添加预构建脚本

在项目的package.json中添加prebuild:ios脚本（仅适用于macOS开发环境）：

"scripts": {
    "prebuild:ios": "echo \"export const LOCAL_IP = '$(ifconfig | grep -Eo 'inet (addr:)?([0-9]*\\.){3}[0-9]*' | grep -Eo '([0-9]*\\.){3}[0-9]*' | grep -v '127.0.0.1')';\" > src/config/local-ip.js"
}

2. 使用生成的IP配置

在JS代码中导入配置文件：

import { LOCAL_IP } from './src/config/local-ip';

const apiBaseUrl = `http://${LOCAL_IP}:3000/api`;

注意事项 #

• 确保IP.txt已被添加到iOS项目的Copy Bundle Resources中（React Native默认构建流程会自动处理，若未生效可手动添加）。
• 方法一的优势是直接复用React Native生成的IP.txt，避免IP不一致问题；方法二更适合不想接触原生代码的场景。

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