在 React Native 中从 AsyncStorage 设置文本输入值

Question

我已经成功地将我的电子邮件和密码值存储在ReactNative的AsyncStorage中。

现在，我还能够在应用程序启动时从AsyncStorage获取值。

我现在正在使用Alert.alert()显示值。

我很困惑如何在我的两个文本输入中设置该值：

1. 电子邮件和 2.密码。

我对状态有一点了解。可以使用状态。 但是怎么做呢？

任何想法 如何动态更改或设置TextInput中的值？

谢谢。

编辑

国家：

state = {
email: '',
password: '',
register: false,
activity: false,
isRemember:false,
}

componentWillMount(){
//To handle Remember Me :
this._checkForRememberMe();
}

登录成功时：

this._storeRememberME();

_storeRememberME=async()=>{
//SAVING ASYNCSTORAGE VALUE FOR REMEMBER ME : 
Alert.alert("is Remember state >>"+this.state.isRemember);
if(this.state.isRemember){
await AsyncStorage.setItem('username', this.state.email);
await AsyncStorage.setItem('password', this.state.password);  
Alert.alert("is Remember state inside >>"+this.state.isRemember);
await AsyncStorage.setItem('isRemember', 'yes');
}else{
const isRemember =AsyncStorage.getItem('rememberMe');
if(isRemember){
Alert.alert("Async clear "+this.state.isRemember);
await AsyncStorage.clear();
}
}
}
// Fetch the token from storage then navigate to our appropriate place
_checkForRememberMe = async () => {
const isRemember = await AsyncStorage.getItem('isRemember');
if(isRemember){
const username = await AsyncStorage.getItem('username');
const password = await AsyncStorage.getItem('password');
this.state.email=username;
this.state.password=password;
this.state.checkedRemember=true;
Alert.alert(""+this.state.email+""+this.state.password);
}else{
this.state.checkedRemember=false;
}
}

_handleCheck(val( {

if(val){
this.state.isRemember=true;
}else{
this.state.isRemember=false;
}
Alert.alert("is remember", ">>>"+val);

}

复选框如下：

<Checkbox
onChange={(val) => this._handleCheck(val)}
style={{marginRight:8}}
checked={checkedRemember}
checkedColor={$primaryBlue}
uncheckedColor={$lightGray}
iconName='matMix'
/>

Answer 1

您可以在您的状态中获取一个变量并将此变量设置为您的TextInput。然后在构造函数中设置AsyncStorage状态中的值。因为状态反映到视图中。因此，当您从AsyncStorage获得价值时，您将看到TextInput的价值。

对你来说是一个很好的例子。

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
Button,
View,
AsyncStorage
} from 'react-native';
export default class AsyncStorageExample extends Component {
constructor(props) {
super(props);
this.state = {
myKey: null
}
}
async getKey() {
try {
const value = await AsyncStorage.getItem('@MySuperStore:key');
this.setState({myKey: value});
} catch (error) {
console.log("Error retrieving data" + error);
}
}
async saveKey(value) {
try {
await AsyncStorage.setItem('@MySuperStore:key', value);
} catch (error) {
console.log("Error saving data" + error);
}
}
async resetKey() {
try {
await AsyncStorage.removeItem('@MySuperStore:key');
const value = await AsyncStorage.getItem('@MySuperStore:key');
this.setState({myKey: value});
} catch (error) {
console.log("Error resetting data" + error);
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Demo AsyncStorage!
</Text>
<TextInput
style={styles.formInput}
placeholder="Enter key you want to save!"
value={this.state.myKey}
onChangeText={(value) => this.saveKey(value)}
/>
<Button
style={styles.formButton}
onPress={this.getKey.bind(this)}
title="Get Key"
color="#2196f3"
accessibilityLabel="Get Key"
/>
<Button
style={styles.formButton}
onPress={this.resetKey.bind(this)}
title="Reset"
color="#f44336"
accessibilityLabel="Reset"
/>
<Text style={styles.instructions}>
Stored key is = {this.state.myKey}
</Text>

</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 30,
flex: 1,
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
formInput: {
paddingLeft: 5,
height: 50,
borderWidth: 1,
borderColor: "#555555",
},
formButton: {
borderWidth: 1,
borderColor: "#555555",
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
marginTop: 5,
},
});
AppRegistry.registerComponent('AsyncStorageExample', () => AsyncStorageExample)