React Native - хранить данные в локальной БД / AsyncStorage без подключения к Inte rnet? - PullRequest
Новая
       94

React Native - хранить данные в локальной БД / AsyncStorage без подключения к Inte rnet?

0 голосов
/ 21 марта 2020

Каков наилучший способ создать дружественное к офлайн-приложению, где мое требование - никогда не мешать пользователю отправлять данные независимо от возможности подключения к inte rnet.

Когда имеется возможность подключения данных POST непосредственно к онлайн-серверу а когда соединения нет, сохраняйте данные в каком-то локальном хранилище (надежном), пока соединение не будет установлено снова, и в этом случае немедленно отправьте данные на онлайн-сервер.

1 Ответ

1 голос
/ 21 марта 2020

Вы можете использовать эту библиотеку, я использовал ее в нескольких моих проектах

реагировать-native-netinfo вернет вам обратный вызов, когда приложение не связано с inte rnet

вы можете выполнять и обрабатывать дальнейшие действия там *

A small example
now you'll get the value in redux if your device is connected or not

*

и помните, что это не работает в тесте симулятора на реальном устройстве 

import React from 'react';
// import NetInfo from "@react-native-community/netinfo";
import { View, Text, Dimensions, StyleSheet ,NetInfo} from 'react-native';
import {toggleNetworkState} from '../../actions/list';
import { connect } from 'react-redux';
const { width } = Dimensions.get('window');

function MiniOfflineSign() {
  return (
    <View style={styles.offlineContainer}>
      <Text style={styles.offlineText}>No Internet Connection</Text>
    </View>
  );
}

class OfflineNotice extends React.Component {
  state = {
    isConnected: false
  };

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

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

  handleConnectivityChange = isConnected => {
    this.setState({
        isConnected: isConnected
    })
    this.props.toggleNetworkState(isConnected);
  };

  

  render() {
    if (!this.props.state.list.isNetwork) {
      return <MiniOfflineSign />;
    }
    return null;
  }
}

const styles = StyleSheet.create({
  offlineContainer: {
    backgroundColor: '#b52424',
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    width,
    position: 'absolute',
    top: 64,
    zIndex:1,
  },
  offlineText: { color: '#fff' }
});


const mapStateToProps = state => ({
    state
    });

export default connect(mapStateToProps, {toggleNetworkState})(OfflineNotice);
...