Javascript 关闭应用程序后，反应本机进度条百分比不保持不变

每次我按下一个按钮，进度条将上升%20，但问题是，例如，如果它在%80，而我重新加载应用程序，它将显示为%60，我想知道是否有人可以帮助我解决这个问题，使进度条百分比在重新加载或关闭应用程序后保持不变

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

“严格使用”；
var React=require（'React-native'）；
var ProgressBar=require（'react-native-progress-bar'）；
变量{
评估学，
异步存储，
样式表，
文本，
看法
可触摸高光
}=反应；
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#FFF”，
},
按钮：{
对齐自我：“中心”，
玛金托普：50，
宽度：100，
身高：50，
背景颜色：“#0059FF”，
边界半径：8，
边界宽度：2，
边框颜色：“#0059FF”
},
按钮栏：{
对齐自我：“中心”，
玛金托普：10，
宽度：100，
身高：50，
背景颜色：“#3B3A3A”，
边界半径：8，
边界宽度：2，
边框颜色：“#3B3A3A”
},
按钮文字：{
尺码：18，
textAlign:'中心'，
线高：33，
颜色：“#FFF”，
}
});
var进程=0；
类BasicStorageExample扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
进展：进展
}
}
componentDidMount（）{
AsyncStorage.getItem（'progressbar'）
。然后（（值）=>{
JSON.parse（值）；
这是我的国家({
进展：价值
});
log（'加载进度：'+值）；
})
.完成（）；
}
onButtonPress（）{
AsyncStorage.setItem（'progressbar'，JSON.stringify（PROGRESS））
.然后（（）=>{
JSON.parse（PROGRESS）；
这是我的国家({
进度：进度+=0.2
});
console.log（'按下按钮的进度：'+进度）；
})
.完成（）；
}
onButtonCleuppress（）{
AsyncStorage.setItem（'progressbar'，JSON.stringify（PROGRESS））
.然后（（）=>{
JSON.parse（PROGRESS）；
进度=0；
这是我的国家({
进展：0
});
})
.完成（）；
}
render（）{
返回(
多恩
清楚的
);
}
};
AppRegistry.registerComponent（'BasicStorageExample'，（）=>BasicStorageExample）；

问题在于，您正在获取旧的进度值（在按

0.2

递增之前），并将该值设置为项目

进度栏

因此，每次重新加载时，React都会运行

componentDidMount

函数，并且由于您将

progressbar

设置为旧的进度值，因此它将始终在视图中显示的增量后显示一个增量

尝试将您的

onButtonPress（）

更改为：

onButtonPress() {
    PROGRESS += 0.2;
    AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
    ... // continues normally

---

问题是，您正在获取旧的进度值（在按

0.2

递增之前），并将此值设置为项目

progressbar

因此，每次重新加载时，React都会运行

componentDidMount

函数，并且由于您将

progressbar

设置为旧的进度值，因此它将始终在视图中显示的增量后显示一个增量

尝试将您的

onButtonPress（）

更改为：

onButtonPress() {
    PROGRESS += 0.2;
    AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
    ... // continues normally