对input中的值进行储存,获取,删除操作
import React, { Component } from "react";
import {
View,
Image,
TouchableOpacity,
Button,
Text,
AsyncStorage,
TextInput,
} from "react-native";
const KEY="save_key";
class AsyncStoragePage extends Component {
constructor(props){
super(props);
this.state={
showText:''
}
}
render() {
const userStore = this.props["domain.user"];
const navigation = this.props.navigation;
return (
<View>
<Text>{this.state.showText}</Text>
<TouchableOpacity style={{backgroundColor: '#caa',width:100,height:50}} onPress={()=>{
this.loadData();
}}/>
<TextInput
style={{height:50,width:370,backgroundColor:'#aaa'}}
onChangeText={text => {
this.value=text;
}}
/>
<View style={{}}>
<Button title={"存储"} style={{backgroundColor: '#acc',width:100,height:50}} onPress={()=>{
this.doSave();
}}/>
<Button title={"删除"} style={{backgroundColor: '#acc',width:100,height:50}} onPress={()=>{
this.doRemove();
}}/>
<Button title={"获取"} style={{backgroundColor: '#acc',width:100,height:50}} onPress={()=>{
this.getData();
}}/>
</View>
</View>
);
}
doSave(){
// 用法一
// AsyncStorage.setItem(KEY, this.value ,error => {
// error && console.log(error.toString());
// })
// 用法二
AsyncStorage.setItem(KEY, this.value)
.catch(error => {
error && console.log(error.toString())
})
// 用法三
// try {
// await AsyncStorage.setItem(KEY, this.value)
// } catch (error) {
// error && console.log(error.toString())
// }
}
doRemove(){
// AsyncStorage.removeItem(KEY, (error: ?Error) => {
// error && console.log(error.toString());
// })
// 用法二
AsyncStorage.removeItem(KEY)
.catch(error => {
error && console.log(error.toString())
})
// 用法三
// try {
// await AsyncStorage.removeItem(KEY)
// } catch (error) {
// error && console.log(error.toString())
// }
}
getData(){
// AsyncStorage.getItem(KEY, (error, value) => {
// this.setState({
// showText: value
// });
// console.log(value);
// error && console.log(error.toString());
// })
// 用法二
AsyncStorage.getItem(KEY)
.then(value => {
this.setState({
showText: value
})
console.log(value)
})
.catch(error => {
error && console.log(error.toString())
})
// 用法三
// try {
// const value = await AsyncStorage.getItem(KEY)
// this.setState({
// showText: value
// })
// console.log(value)
// } catch(error) {
// error && console.log(error.toString())
// }
}
loadData(){
fetch('http://web.juhe.cn:8080/constellation/getAll?consName=%E5%8F%8C%E5%AD%90%E5%BA%A7&type=today&key=46dd5530ed37e3aa19019edfa1d6de3d')
.then(response => {
if (response.ok){
return response.text();
}
throw new Error('Network response was not ok.');
})
.then(responseText => {
this.setState({
showText: responseText
})
})
.catch(e =>{
this.setState({
showText:e.toString()
})
})
}
}
AsyncStoragePage.navigationOptions =({ navigation }) => ( {
title: 'Help',
// headerLeft: (
// <View style={{ marginLeft: 15 }}>
// <TouchableOpacity onPress={() => navigation.goBack()}>
// <Image source={require('../../assets/images/profile_pic/baseline-chevron_left_back.png')}/>
// </TouchableOpacity>
// </View> ),
headerTitleStyle: {
alignSelf: "center",
textAlign: "center",
flex: 1
},
});
export default AsyncStoragePage;