Question

I am using react native to build an app and the only problem i am having is that i have a progress bar that keeps track of the users progress but when I close the app completely and open it back up everything resets to its original data.So I turned to AsyncStorage to hold my data in but I am having trouble trying to figure out how to use it in my code, if anyone could help that would be great.

*UPDATE: I tried to implement asyncstorage and the data seems to be sticking when I fully close the app but I have it so every time I press a button the progress bar will go up %20 and for instance if its at %80 and I reload the app it will show it as %60 instead, I was wondering if anyone could help me fix this issue to have the progress bars percentage stay the same after reloading or closing the app.

'use strict';

var React = require('react-native');
var ProgressBar = require('react-native-progress-bar');

var {
  AppRegistry,
  AsyncStorage,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
  },
  button: {
    alignSelf: 'center',
    marginTop: 50,
    width: 100,
    height: 50,
    backgroundColor: '#0059FF',
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#0059FF'
  },
  buttonClear: {
    alignSelf: 'center',
    marginTop: 10,
    width: 100,
    height: 50,
    backgroundColor: '#3B3A3A',
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#3B3A3A'
  },
  buttonText: {
    fontSize: 18,
    textAlign: 'center',
    lineHeight: 33,
    color: '#FFF',
  }
});

var PROGRESS = 0;

class BasicStorageExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: PROGRESS
    }
  }

  componentDidMount() {
    AsyncStorage.getItem('progressbar')
      .then((value) => {
        JSON.parse(value);
        this.setState({
          progress: value 
        });
        console.log('Progress on load: ' + value);
      })
      .done();
  }

  onButtonPress() {
    AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
      .then(() => {
        JSON.parse(PROGRESS);
        this.setState({
          progress: PROGRESS += 0.2
        });
        console.log('Progress on Button Press: ' + PROGRESS);
      })
      .done();
  }

  onButtonClearPress() {
    AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
      .then(() => {
        JSON.parse(PROGRESS);
        PROGRESS = 0;
        this.setState({
          progress: 0
        });
      })
      .done();
  }

  render() {
    return (
      <View style={styles.container}>
        <ProgressBar
          fillStyle={{}}
          backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
          style={{marginTop: 10, width: 300}}
          progress={this.state.progress} />
        <TouchableHighlight
          ref="button"
          style={styles.button}
          underlayColor='#002C7F'
          onPress={this.onButtonPress.bind(this)}>
          <Text style={styles.buttonText}>Done</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={styles.buttonClear}
          underlayColor='#002C7F'
          onPress={this.onButtonClearPress.bind(this)}>
          <Text style={styles.buttonText}>Clear</Text>
        </TouchableHighlight>
      </View>
    );
  }
};

AppRegistry.registerComponent('BasicStorageExample', () => BasicStorageExample);

Answer 1

只需致电AsyncStorage.setItem('some-id', someVar)进行设置，然后AsyncStorage.getItem('some-id')进行检索即可。它类似于localStorage。文档中有完整的API和示例：

https://facebook.github.io/react-native/docs/asyncstorage.html

Answer 2

对于商店数据

AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))

异步获取数据调用。

async componentWillMount() {
    const result = await AsyncStorage.getItem('progressbar');

    // you will get value. check your conditions here
}

Having trouble trying to implement AsyncStorage in React Native

2 个答案: