react-native - 不断检查整个应用程序的网络连接

Question

我正在开发一个从外部 API 获取数据的应用程序。每当用户尝试建立连接但未连接时，他们会收到丑陋的死机红屏。

我一直在玩 NetInfo为了缓解这种情况，特别是 NetInfo.isConnected .

我的方式render逻辑是结构化的，我觉得我拿不到this.state.isConnected === false实际触发——即使我故意在 iOS 模拟器中断开互联网。如果我设置这个逻辑来触发它的 AlertIOS.Alert方法当 this.state.isConnected返回任何虚假值，它会触发那个令人不快的警报 即使用户有连接，因为 getInitialState将其设置为 null最初 .我应该如何解决这个问题？

此外，我是否应该期望为我的所有组件重新创建此逻辑，因为我觉得我几乎需要经常检查网络访问？

===

这是我的 getInitialState生命周期方法

  getInitialState: function() {
    return {
      accessToken: false,
      isConnected: null,
      selectedTab: 'products'
    }
  },

然后在 componentWillMount , 我为 NetInfo.isConnected 设置了一个事件监听器以及手动获取我的连接状态:

  componentWillMount: function() {
    NetInfo.isConnected.addEventListener('change', this.handleConnectivityChange)
    NetInfo.isConnected.fetch().done((data) => {
      console.log(this.state.isConnected);
      this.setState({
        isConnected: data
      })
    })
  },

曾经我的 componentDidMount , 我检查一下我的 isConnected bool 值返回真 和 我的 accessToken不存在。如果这两个条件都满足，我会为我的 token 进行 API 调用:

  componentDidMount: function() {
    if (this.state.isConnected && !this.state.accessToken){
      api.getToken()
        .then((responseData) => {
          this.setState({
            accessToken: responseData.access_token,
          });
        })
        .done();
    }
  },

我还处理了 componentWillUnmount 的事件监听器的删除:

  componentWillUnmount: function() {
    NetInfo.isConnected.removeEventListener(
      'change',
      this.handleConnectivityChange
    );
  },

handleConnectivityChange我的事件监听器的回调是:

  handleConnectivityChange: function(change) {
    this.setState({
      isConnected: change
    })
    console.log("I have changed!" + change)
  },

最后，我的 render方法根据我的连接状态返回三件事之一:

  render: function() {
    if (this.state.isConnected === 'null') {
      return (
        <View style={styles.container}>
          <Loading
            loaded={this.state.isConnected} />
        </View>
        )
    }
    if (this.state.isConnected === 'false') {
      return (
        <View>
          {AlertIOS.alert('You need to be connected to the internet!')}
        </View>
        )
    }
    return (
      <TabBarIOS>
        <Icon.TabBarItem
          title='Home'
          selected={this.state.selectedTab === 'products'}
          iconName={'home'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'products') {
              this.setState({
                selectedTab: 'products'
              });
            } else if (this.state.selectedTab === 'products') {
              this.refs.productRef.popToTop();
            }
          }}>
          {this.renderProductView()}
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="Collections"
          selected={this.state.selectedTab === 'collections'}
          iconName={'list'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'collections') {
              this.setState({
                selectedTab: 'collections'
              });
            } else if (this.state.selectedTab === 'collections') {
              this.refs.collectionRef.popToTop();
            }
          }}>
          {this.renderCollectionView()}
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="About"
          selected={this.state.selectedTab === 'about'}
          iconName={'info'}
          iconSize={20}
          onPress={() => {
            this.setState({
              selectedTab: 'about'
            });
          }}>
          {this.renderAboutView()}
        </Icon.TabBarItem>
      </TabBarIOS>
      )
  },

Answer 1

我最终按照以下方式构建了我的应用程序:

首先，我添加了一个 catch对我的异步 API 调用的声明。它们看起来像这样:

  getCollectionsData: function() {
    api.getFeaturedCollections(this.props.accessToken)
      .then((responseData) => {
        this.setState({
          featuredCollectionsDataSource: this.state.featuredCollectionsDataSource.cloneWithRows(responseData.collections),
          loaded: true
        })
      })
    .then(() => {
      api.getAllCollections(this.props.accessToken)
        .then((responseData) => {
          this.setState({
            allCollectionsDataSource: this.state.allCollectionsDataSource.cloneWithRows(responseData.collections),
          })
        })
    })
    .catch((error) => {
      AlertIOS.alert('Error', 'You need to be connected to the internet')
    })
    .done()
  },

我也把API调用逻辑移到了自己的函数中，在 componentWillMount期间调用.

然后，我为 AppState.IOS 添加一个更改监听器，它检查在前台/后台运行的应用程序:

  componentDidMount: function() {
    AppStateIOS.addEventListener('change', this.handleAppStateChange);
  },

  componentWillUnmount: function() {
    AppStateIOS.removeEventListener('change', this.handleAppStateChange);
  },

我对这些更改的处理程序只是调用 getCollectionsData .