在React Native中实现AsyncStorage时遇到了麻烦
Having trouble trying to implement AsyncStorage in React Native
我使用react native来构建一个应用程序,我唯一的问题是,我有一个进度条,跟踪用户的进度,但当我完全关闭应用程序并打开它备份一切重置为其原始数据。所以我转向AsyncStorage来保存我的数据,但我在试图找出如何在我的代码中使用它时遇到了麻烦,如果有人能帮助,那将是伟大的。
*更新:我试图实现asyncstorage和数据似乎坚持当我完全关闭应用程序,但它所以我每次按下一个按钮进度条会上升% 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);
调用AsyncStorage.setItem('some-id', someVar)
设置,然后调用AsyncStorage.getItem('some-id')
检索。它类似于localStorage。文档中有完整的API和示例:
用于存储数据
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
用于异步获取Data调用。
async componentWillMount() {
const result = await AsyncStorage.getItem('progressbar');
// you will get value. check your conditions here
}
相关文章:
- 使用JavaScript获取Google地图上显示的所有推文时遇到麻烦
- 在 Javascript 中添加数字时遇到麻烦
- 使用 Coffeescript 和 Express .js 将变量传递给 Jade 时遇到麻烦
- 编写正确的 jQuery 插件时遇到麻烦
- 在三.js中更改纹理时遇到麻烦
- 从 javascript 中的函数返回时遇到麻烦
- 理解 $.ajax() 参数以获取 PHP 变量时遇到麻烦
- 比较数组时遇到麻烦
- 使 JavaScript 函数工作时遇到麻烦
- 在Firefox和IE中获取CSS属性时遇到麻烦
- 将 Blueimp Gallery 与 HTML 和 Bootstrap 集成时遇到麻烦
- 将jQuery导入WordPress时遇到麻烦
- 在解决来自 coderbyte 的 JavaScript 编码挑战时遇到麻烦
- 从页面抓取时遇到麻烦
- 让jQuery在Wordpress中工作时遇到麻烦
- 在codeigniter框架中添加css和js文件时遇到麻烦
- 处理由dayClick返回的日期时遇到麻烦
- 在使用jQuery更改依赖于滚动位置的类时遇到麻烦
- 在使用javascript加速滚动动画时遇到麻烦
- 在跨域jquery/Ajax服务调用中遇到麻烦