onPress вызывается автоматически при использовании NetInfo - реагировать на родной

Question

NetInfo используется для проверки соединения, и есть функция checkNetwork, вызываемая в onPress из TouchableOpacity. При однократном нажатии кнопки функция 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>
    );
  }
}

Answer 1

Вы не должны объявлять прослушиватель событий внутри самого щелчка,

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>
    );
  }
}

, хотя в вашем случае прослушиватель событий не совсем подходит logi c для поведения пользовательского интерфейса при нажатии кнопки, поэтому я думаю вы можете использовать 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()} />