react-native - 在课堂上使用@react-native-community/netinfo，可能吗？

Question

我正在尝试向我的应用程序添加一个功能，以添加一个视图，向用户表明他已与 Internet 网络断开连接。

所以我去@react-native-community/netinfo 设置它，但我很快发现自己遇到了使用钩子的困难和相关的错误：“ Invalid hook call. Hooks can only be called inside of the body of a function component”。

那么如何在基于类的应用程序上集成@react-native-community/netinfo？

我想在检测到连接状态更改时更改应用程序的状态，以显示或不显示指示断开状态的视图。

您的帮助将不胜感激！

这是我用于测试的内容：

标签： react-nativehookreact-native-community-netinfo

Answer 1

库中有一个可以开箱即用的钩子，称为 useNetInfo() ，您可以像这样使用它：

编辑：

您可以阅读此答案，以便将此挂钩用于基于类的应用程序。这类似于 netInfo。

来自 git，react-native-community 的示例

import {useNetInfo} from "@react-native-community/netinfo";

const YourComponent = () => {
  const netInfo = useNetInfo();

  return (
    <View>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected.toString()}</Text>
    </View>
  );
};

编辑2：

完整示例：

import React from 'react'
import { SafeAreaView, Text } from 'react-native'
import { useNetInfo } from '@react-native-community/netinfo'

export default class Home extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            netInfo: undefined
        }
    }

    setNetInfo = netInfo => {
        this.setState({netInfo})
    }

    render () {

        return (
            <SafeAreaView>
                <SetNetInfo setNetInfo={this.setNetInfo} />
                <Text>Hello world</Text>
            </SafeAreaView>
        )
    }

}

const SetNetInfo = ({ setNetInfo }) => {
    const netInfo = useNetInfo()

    React.useEffect(() => {
        setNetInfo(netInfo)
    },[netInfo])

    return null
}