Почему NetInfo React Native не запускается должным образом при запуске приложения без Интернета?

Question

У меня есть компонент для отслеживания интернет-соединения устройства и отображения маленького красного баннера, когда нет соединения.В целом, это работает правильно: когда вы находитесь в приложении и переключаете Интернет, баннер появляется и исчезает.

Однако, если вы запустите приложение без Интернета , оно не покажет баннер .Как только вы включите Интернет, он с этого момента будет работать правильно.

---

Вот компонент, OfflineNotice.tsx:

import * as React from 'react';
import { NetInfo, StyleSheet, Text, View } from 'react-native';

interface State {
  isConnected: boolean;
}

export class OfflineNotice extends React.Component<any, State> {
  public state = {
    isConnected: true,
  };

  public handleConnectivityChange = (isConnected: boolean) => {
    if (isConnected !== this.state.isConnected) {
      console.log('isConnected', isConnected);
      this.setState({ isConnected });
    }
  };

  public componentDidMount() {
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleConnectivityChange
    );
  }

  public componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this.handleConnectivityChange
    );
  }

  public render() {
    if (!this.state.isConnected) {
      return (
        <View style={styles.container}>
          <Text style={styles.offlineText}>
            No Internet Connection
          </Text>
        </View>
      );
    }
    return null;
  }
}

Answer 1

Как быстро указал JRK в своем комментарии выше, решение простое.Изменения подключения инициируют событие, и при запуске приложения без Интернета изменения подключения не происходит.

Если вы инициализируете isConnected в состоянии как false, событие будет инициировано при инициировании соединения.

Наилучшееспособ сделать это в конструкторе:

constructor(props) {
  super(props);

  NetInfo.isConnected.fetch().then(isConnected => {
    this.setState({isConnected});
  });
}

Если вы этого не сделаете, а вместо этого установите isConnected на false в this.state и добавьте прослушиватель событий в componentDidMount, он не будет работать должным образом на Android.Подсказка к вышесказанному для Терри Бази из комментария к средней статье на эту тему.

Вы можете узнать больше в примерах в документах React Native на NetInfo, особенно в последнем разделе оisConnected свойство: https://facebook.github.io/react-native/docs/netinfo#properties-1