gpt4 book ai didi

javascript - 如何在另一个屏幕访问asyncStorage的Key

转载 作者:行者123 更新时间:2023-11-29 16:32:42 24 4
gpt4 key购买 nike

我的应用程序中存在一些 AsyncStorage 问题,

我需要在另一个屏幕中使用用户名存储的值现在,当我登录屏幕并转到主屏幕时,我需要获取项目存储并向他们展示它的工作正常但是当注销并删除 key 时它使我进入登录屏幕,但是当刷新应用程序时,它会将我移动到主屏幕,2 秒后几乎将我导航到登录屏幕如何在第一次运行应用程序时不这样做

这里是我的两屏代码,

登录界面

import React, { Component } from "react";
import {
StyleSheet,
View,
StatusBar,
Text,
TextInput,
TouchableOpacity,
AsyncStorage
} from "react-native";
export default class Login extends Component {
constructor() {
super();
this.state = {
username: "",
password: ""
};
}

componentDidMount() {
const login = AsyncStorage.getItem("@myApp:username");
if (login == null) {
this.props.navigation.navigate("Login");
} else {
this.props.navigation.navigate("Home");
}
}
_onLogin = () => {
let username = this.state.username;
let password = this.state.password;
if (username !== "" && password !== "") {
AsyncStorage.setItem("@myApp:username", this.state.username).then(
username => {
this.setState({ username: username });
}
);
this.props.navigation.navigate("Home");
console.log(`username is ${username}`);
} else {
this.props.navigation.navigate("Login");
}
};
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#333" barStyle="light-content" />
<Text style={{ fontSize: 28, margin: 10 }}>Login</Text>
<TextInput
placeholder="Username"
onChangeText={username => {
this.setState({ username: username });
}}
value={this.state.username}
autoCorrect={false}
returnKeyType="next"
style={{
padding: 10,
margin: 15,
borderBottomColor: "#333",
borderBottomWidth: 1,
width: "80%"
}}
editable={true}
/>
<TextInput
placeholder="Password"
onChangeText={password => {
this.setState({ password: password });
}}
secureTextEntry={true}
value={this.state.password}
autoCorrect={false}
returnKeyType="next"
style={{
padding: 10,
margin: 15,
borderBottomColor: "#333",
borderBottomWidth: 1,
width: "80%"
}}
editable={true}
/>

<TouchableOpacity
style={{
margin: 20,
padding: 10,
width: "70%",
backgroundColor: "#1a73e8"
}}
onPress={this._onLogin}
>
<Text style={{ color: "#FFF", textAlign: "center", fontSize: 18 }}>
Log In
</Text>
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
}
});

主屏幕

import React, { Component } from "react";
import {
StyleSheet,
View,
ImageBackground,
Text,
AsyncStorage,
TouchableOpacity
} from "react-native";
export default class Home extends Component {
constructor() {
super();
this.state = {
name: ""
};
}
async componentDidMount() {
try {
const storedValue = await AsyncStorage.getItem("@myApp:username");
this.setState({ name: storedValue });
if (storedValue == null) {
this.props.navigation.navigate("Login");
}
console.log(storedValue);
} catch (error) {
Alert.alert("Error", "There was an error.");
}
}
_onLogout = () => {
AsyncStorage.removeItem("@myApp:username").then(
this.props.navigation.navigate("Login")
);
};
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require("./assets/bg1.jpg")}
style={{
flex: 1,
width: "100%",
height: "100%"
}}
>
<View
style={{
backgroundColor: "rgba(0,0,0,0)",
flex: 1,
justifyContent: "center"
}}
>
<Text
style={{
alignSelf: "center",
backgroundColor: "#000fff",
padding: 10,
color: "#fff"
}}
>
{`Hello, ${this.state.name} `}
</Text>
<TouchableOpacity
style={{
margin: 20,
padding: 10,
width: "50%",
backgroundColor: "#1a73e8",
justifyContent: "center",
alignSelf: "center"
}}
onPress={this._onLogout}
>
<Text
style={{ color: "#FFF", textAlign: "center", fontSize: 18 }}
>
Log out?
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
}
}

最佳答案

您可以创建一个包含常量的 js 文件。然后在您的 Constant.js 文件中,您可以像下面这样添加您的 key :

 export const userNameKey= '@myApp:username';

您可以在屏幕中访问该键,如下所示:

import { userNameKey} from './Constants';

并将其用作:

const login = AsyncStorage.getItem(userNameKey);

关于javascript - 如何在另一个屏幕访问asyncStorage的Key,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54061891/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com