Как использовать AsyncStorage с React Native для управления входом в систему - PullRequest
1 голос
/ 12 марта 2019

Я - новичок, и я сделал экран входа в свое приложение (фактически работающий с React Native), я попытался использовать AsyncStorage для управления входом в систему, чтобы войти в остальную часть приложения.Но я мог бы просто войти в систему, указав user / pass, используя const.

Идея в том, чтобы AsynStorage работал в качестве бэкэнда для моего приложения.Вы знаете, как моя база данных, чтобы избежать использования Firebase или другой DBS.Возможно ли это?

И я сделал это, чтобы проверить пользователя и пароль, просто для проверки входа в систему, но на самом деле приложение не имеет «бэкэнда до здесь»

Я хочусоздать базу данных с помощью 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, если есть совпадение с информацией, которую пользователь пишет при входе в систему.

Также спросите, при попытке создатьновая учетная запись, если существует пользователь с такой же информацией, чтобы избежать двуличия.

Заранее спасибо.

1 Ответ

1 голос
/ 13 марта 2019

Вам нужно принять введенное пользователем значение в состояние, и при событии нажатия кнопки необходимо подтвердить его.

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

и в событии onclick вы должны проверить значение состояния.

...