React Native中无法获取网络IPv4地址的问题求助

先解决你遇到的初始化错误 #

你碰到的Invariant Violation错误，大概率是以下原因导致：

• 裸React Native项目混用了Expo专属库（比如expo-network），未配置Expo模块支持
• 第三方原生库未正确安装/链接（比如iOS未执行pod install，Android未同步Gradle）
• 组件渲染时重复执行异步初始化代码，引发模块冲突

通用修复步骤：

# 清除React Native缓存
npx react-native start --reset-cache

# iOS环境重新安装依赖
cd ios && rm -rf Pods Podfile.lock && pod install && cd ..

# Android环境清理构建缓存
cd android && ./gradlew clean && cd ..

获取本地IPv4地址的可靠方案 #

以下方案均针对本地局域网IPv4（如192.168.x.x），而非公网IP：

方案1：使用react-native-network-info（裸RN项目推荐）

确保安装流程正确：

npm install react-native-network-info --save
# iOS必须执行
cd ios && pod install && cd ..

示例代码：

import React, { useState, useEffect } from 'react';
import { Text, View, Button } from 'react-native';
import { NetworkInfo } from 'react-native-network-info';

const App = () => {
  const [localIp, setLocalIp] = useState('');

  const getLocalIp = async () => {
    try {
      const ipv4 = await NetworkInfo.getIPV4Address();
      setLocalIp(ipv4 || '未获取到本地IPv4');
    } catch (err) {
      console.error('IP获取失败:', err);
      setLocalIp('获取失败');
    }
  };

  // 组件挂载时自动获取，也可通过按钮触发
  useEffect(() => {
    getLocalIp();
  }, []);

  return (
    <View style={{ paddingTop: 200, alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>本地IPv4: {localIp}</Text>
      <Button title='重新获取' onPress={getLocalIp} />
    </View>
  );
};

export default App;

方案2：使用react-native-device-info（注意版本兼容）

v10+版本中getIpAddress已废弃，需用getIpAddresses过滤IPv4：

import React, { useState, useEffect } from 'react';
import { Text, View, Button } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const App = () => {
  const [localIp, setLocalIp] = useState('');

  const getLocalIp = async () => {
    try {
      const ipList = await DeviceInfo.getIpAddresses();
      // 筛选出IPv4格式的地址
      const ipv4 = ipList.find(ip => ip.includes('.')) || '未找到IPv4';
      setLocalIp(ipv4);
    } catch (err) {
      console.error('IP获取失败:', err);
      setLocalIp('获取失败');
    }
  };

  useEffect(() => {
    getLocalIp();
  }, []);

  return (
    <View style={{ paddingTop: 200, alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>本地IPv4: {localIp}</Text>
      <Button title='重新获取' onPress={getLocalIp} />
    </View>
  );
};

export default App;

关键注意事项 #

• 不要直接在组件函数顶层调用异步方法（比如你之前直接写NetworkInfo.getIPV4Address().then(...)），会导致组件每次渲染都重复执行，引发初始化冲突
• 裸RN项目避免使用Expo专属库，若必须使用需先安装expo-modules-core并配置原生项目
• 公网IP和本地IP是两个概念：通过第三方API（比如你用axios调用的geolocation-db）获取的是公网IP，本地IPv4必须通过原生模块读取设备网络配置

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