没有Expo的React Native - 如何从promise获得的函数值中导出？

Question

我有这样的场景，使用纯 React Native，没有 Expo：我目前正在使用 GitHub 上的

@react-native-tethering

库（wifi 和热点），并尝试在文本段落中填充 wifi 或热点的 IP 地址。 所以我在主 tsx 文件中有

App()

函数，例如：

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> Let's check what IP I
            have currently: <Text style={styles.highlight}> {returnIpAddress()}</Text>
          </Section>>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

因此，由于该网络共享库具有 Promise 函数（

getDeviceIp()

、

getMyDeviceIp()

），因此我创建了一个函数，该函数应将设备的当前 IP 传递给 Text，例如：

function returnIpAddress() {
  const [IpAddress, setIpAddress] = useState<string | null>(null);
  useEffect(() => {
    const [stateHotspot, setStateHotspot] = useState<boolean | null>(null);
    const [stateWifi, setStateWifi] = useState<boolean | null>(null);
    TetheringManager.isWifiEnabled().then(wifiState => {
      setStateWifi(wifiState ? true : false);
    });
    HotspotManager.isHotspotEnabled().then(hotspotState => {
      setStateHotspot(hotspotState ? true : false);
    });
    if (stateHotspot) {
      TetheringManager.getDeviceIP().then(wifiIP => {
        setIpAddress(wifiIP);
      });
    } else if (stateWifi) {
      HotspotManager.getMyDeviceIp().then(hotspotIP => {
        setIpAddress(hotspotIP);
      });
    } else {
      setIpAddress('0.0.0.0');
    }

    return () => IpAddress;
  }, []);

  return IpAddress;
}

在

<Text></Text>

内部调用它并返回IpAddress；但是我在使用钩子时遇到错误，即使它是一个像这样的函数：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

我还尝试调用

async ()

假设我异步获取该 IP 值，但这是不允许的。 在我用 React Native Expo 制作的另一个示例项目中，我创建了一个组件导出函数，我制作了类似的东西，并且相反...... 也许在没有 Expo 的 React Native 中，该钩子的运行方式是否不同？获取文本中的 IpAddress 的技巧是什么？或者也许我可能错过了什么？

谢谢！ 干杯！

Answer 1

您正在从常规 JavaScript 函数调用 useState 和 useEffect

returnIpAddress

，这是错误的，您需要：

• 从 React 函数组件调用 Hooks。或
• 从自定义 Hook 中调用 Hook。 要解决您的问题，您可以通过在函数名称示例 (useIpAddress) 之前添加

  use

  来创建 returnIpAddress customHook ； 然后你可以在你的组件中使用这个自定义钩子，如下所示：

    function App(): React.JSX.Element {
    const ipAddress=useIpAddress();
    .....
    .....
    <Text style={styles.highlight}> {returnIpAddress}</Text>
    }
     

您可以在这里查看有关钩子规则的更多信息：https://legacy.reactjs.org/docs/hooks-rules.html