如何将 AsyncStorage 与 React Native 结合使用来管理登录

Question

我是初学者，我在我的应用程序中创建了一个登录屏幕（实际上是在使用 React Native），我尝试使用 AsyncStorage 来管理登录以进入应用程序的其余部分。但是我可以使用已经使用 const.

定义的 user/pass 进行登录

问题的想法是让 AsynStorage 作为我的应用程序的后端。你知道，就像我的数据库一样，要避免使用 Firebase 或其他 DBS。这可能吗？

我这样做是为了检查用户和密码，只是为了测试登录，但实际上该应用程序没有"backend until here"

我想使用 Async 创建一个数据库，拥有用户信息和类似的东西。同样，我还是初学者，不确定这是否可行。

class LoginScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: "", password: "" };
  }

  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <View style={styles.container}>
        ...
        <TouchableOpacity style={styles.loginButton} onPress={this._signin}>
          <Text style={styles.loginButtonText}> Login </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._signup}>
          <Text style={styles.createAccount}> Or create an account </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _signin = async () => {
    if (
      userInfo.email === this.state.email &&
      userInfo.password === this.state.password
    ) {
      await AsyncStorage.setItem("logged", "1");
      this.props.navigation.navigate("App");
    } else {
      alert("Try again");
    }
  };

  _signup = async () => {
    this.props.navigation.navigate("Authentication");
  };
}

然后我按照下面的方式制作了一个注册屏幕，在这里我想将用户添加到一个不存在的数据库中，还在想如何去做。

export default class SignUpScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nombre: "",
      username: "",
      email: "",
      cellphone: "",
      password: "",
      email: "",
      cellphone: "",
      password: ""
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.logo} source={require("../images/user.png")} />

        <Text style={styles.welcome}> ¡Creemos tu cuenta! </Text>

        <TextInput
          style={styles.input}
          placeholder="Full name"
          autoComplete="nombre"
          onChangeText={nombre => this.setState({ nombre })}
          value={this.state.nombre}
        />

        <TextInput
          style={styles.input}
          placeholder="Username"
          onChangeText={username => this.setState({ username })}
          value={this.state.username}
        />

        <TextInput
          style={styles.input}
          placeholder="email"
          autoComplete="email"
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />

        <TextInput
          style={styles.input}
          placeholder="Cellphone"
          autoComplete="tel"
          keyboardType="phone-pad"
          maxLength={10}
          onChangeText={cellphone => this.setState({ cellphone })}
          value={this.state.cellphone}
        />

        <TextInput
          style={styles.input}
          placeholder="Pass"
          onChangeText={password => this.setState({ password })}
          secureTextEntry={true}
          autoCapitalize="none"
          value={this.state.password}
        />

        <TouchableOpacity
          style={styles.loginButton}
          onPress={this._createAccount}
        >
          <Text style={styles.loginButtonText}> Create account </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this._goback}>
          <Text style={styles.createAccount}> Or singin </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _goback = async () => {
    this.props.navigation.navigate("Auth");
  };

  _createAccount = async () => {
    const arrayData = [];

    if (
      this.state.nombre &&
      this.state.username &&
      this.state.email &&
      this.state.cellphone &&
      this.state.password !== null
    ) {
      const data = {
        nombre: this.state.nombre,
        username: this.state.username,
        email: this.state.email,
        cellphone: this.state.cellphone,
        password: this.state.password
      };
      arrayData.push(data);
      try {
        AsyncStorage.getItem("database_form").then(value => {
          if (value !== null) {
            const d = JSON.parse(value);
            d.push(data);
            AsyncStorage.setItem("database_form", JSON.stringify(d)).then(
              () => {
                this.props.navigation.navigate("Auth");
              }
            );
          } else {
            AsyncStorage.setItem(
              "database_form",
              JSON.stringify(arrayData)
            ).then(() => {
              this.props.navigation.navigate("Auth");
            });
          }
        });
      } catch (err) {
        console.log(err);
      }
    } else {
      alert("Todos los campos son obligatorios");
    }
  };
}

而且我不知道如何在登录屏幕的 if 中询问是否检查与我在注册屏幕中输入的用户匹配的任何新用户。不确定我是否错误地实施了这一点。

我只想检查 AsyncStorage 是否与用户在登录时写入的信息相匹配。

同时询问，在尝试创建新帐户时，是否有具有相同信息的现有用户，以避免口是心非。

提前致谢。

Answer 1

您需要在状态下获取用户输入的值，并在按钮单击事件中验证它。

<Input placeholder='LogIn Id' onChangeText={(username) => this.setState({ username: username })} />
<TouchableOpacity  onPress={() => this.onclick()}>
<Text>LogIn</Text>
</TouchableOpacity>

并且在 onclick 事件中您需要检查状态值。

Answer 2

如何使用异步存储进行登录：

第 0 步：const AuthContext = React.createContext(); 第 1 步：创建 AuthContex const authContext = React.useMemo() 第 2 步：<AuthContext.Provider value={authContext}>.....</AuthContext.Provider>

如何将 AsyncStorage 与 React Native 结合使用来管理登录

How to use AsyncStorage with React Native to manage a login

react-native

login

asyncstorage