Question

NetInfo用于检查连接＆在TouchableOpacity的onPress中有一个checkNetwork函数。单击一次按钮后，checkNetwork 当网络连接断开时，无需点击按钮即可自动多次调用该功能，反之亦然。

请查看代码here:

请看看video

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

尽管在您的情况下，事件监听器并不完全适合于按下按钮的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()} />

使用NetInfo时会自动调用onPress-react native

1 个答案: