在 React Native 中完全关闭应用程序后如何保留应用程序的内存

Question

我正在使用 react native 来构建应用程序，我遇到的唯一问题是我有一个进度条来跟踪用户的进度，但是当我完全关闭应用程序并重新打开它时，一切都会重置为原始状态数据。我该如何做才能在他们关闭应用程序时保留数据？

不确定如何添加到 AsyncStorage 这是我的代码：

'use strict';

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

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

var PROGRESS = 0;

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

class BasicStorageExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      progress: PROGRESS
    };
  }

  onButtonPress() {
    this.setState({
      progress: PROGRESS += 0.2
    });
  }

  onButtonClearPress() {
    PROGRESS = 0;
    this.setState({
      progress: 0
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <ProgressBar
          fillStyle={{}}
          backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
          style={{marginTop: 10, width: 300}}
          progress={this.state.progress} />
        <TouchableHighlight
          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

您可以尝试查看 Nic Raboy 的这篇文章。它有一个视频演示以及示例代码。

https://blog.nraboy.com/2015/09/saving-data-in-your-react-native-mobile-application/

这里有一些示例代码（来自文章），演示了如何使用异步存储保存数据。干杯！

"use strict";


var React = require("react-native");
 
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    AsyncStorage,
} = React;
 
var ReactProject = React.createClass({


componentDidMount: function() {
    AsyncStorage.getItem("myKey").then((value) => {
        this.setState({"myKey": value});
    }).done();
},

getInitialState: function() {
    return { };
},

render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.saved}>
                {this.state.myKey}
            </Text>
            <View>
                <TextInput
                    style={styles.formInput}
                    onChangeText={(text) => this.saveData(text)}
                    value="" />
            </View>
            <Text style={styles.instructions}>
                Type something into the text box.  It will be saved to
                device storage.  Next time you open the application, the saved data
                will still exist.
            </Text>
        </View>
    );
},

saveData: function(value) {
    AsyncStorage.setItem("myKey", value);
    this.setState({"myKey": value});
}


});



var styles = StyleSheet.create({
    container: {
        padding: 30,
        flex: 1,
        justifyContent: "center",
        alignItems: "stretch",
        backgroundColor: "#F5FCFF",
    },
    formInput: {
        flex: 1,
        height: 26,
        fontSize: 13,
        borderWidth: 1,
        borderColor: "#555555",
    },
    saved: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    instructions: {
        textAlign: "center",
        color: "#333333",
        marginBottom: 5,
        marginTop: 5,
    },
});
 
AppRegistry.registerComponent('ReactProject', () => ReactProject);