时间戳

首页 > 解决方案 > 使用 NetInfo 时自动调用 onPress - 本机反应

react-native - 使用 NetInfo 时自动调用 onPress - 本机反应

问题描述

NetInfo 用于检查连接，在 TouchableOpacity 的 onPress 中调用了一个 checkNetwork 函数。当按钮被点击一次时，checkNetwork 函数会在网络连接丢失时自动调用多次，而无需点击按钮，反之亦然。

请看这里的代码：

请看视频

export default class App extends React.Component {

  checkNetwork = () => {
    NetInfo.addEventListener((state) => {
      if (state.isConnected) {
        alert('isConnected');
      } else {
        alert('not connected');
      }
    });
  };

  render() {
    return (
        <View style={styles.container}>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={()=> this.checkNetwork()}>
                <Text>Check here</Text>
            </TouchableOpacity>
        </View>
    );
  }
}

标签： react-native

解决方案

您不应在单击本身内声明事件侦听器，

export default class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = {alert: ''};
  }
  componentDidMount() {
    NetInfo.addEventListener((state) =>  this.setState({ alert: state.isConnected ? 'isConnected' : 'not connected'})
 }
  checkNetwork = () => alert(this.state.alert)

  render() {
    return (
        <View style={styles.container}>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={()=> this.checkNetwork()}>
                <Text>Check here</Text>
            </TouchableOpacity>
        </View>
    );
  }
}

尽管在您的情况下，事件侦听器并不完全适合按下按钮的 UI 行为的逻辑，所以我认为您可能想使用useNetInfo


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


class App extends React.Component {
 checkNetwork = () => {
      if (this.props.netInfo.isConnected) {
        alert('isConnected');
      } else {
        alert('not connected');
      }
    });
  };

...rest render...
}

export default () => <App netInfo={useNetInfo()} />

推荐阅读