Добро пожаловать в Stackoverflow:) ...
Прежде всего, если вы новичок в React Native, следуйте всем необходимым документам здесь
В любом случае, как начинающий ваш код в порядке .. но дело в React Native, как вы знаете, мы реализуем классы для каждого компонента / экрана / функции. В вашем коде, где вы пытаетесь сделать все функции приложения в одной базе кода в одном файле. Это не лучшая практика. Изучите React Native с лучшими практиками. :)
Давайте теперь перейдем к вашему вопросу
В вашем сценарии просто необходимо добавить React Native Local Storage - AsyncStorage для поддержки пользователя сеансы легко. Как только пользователь успешно вошел в систему, вам нужно сделать некоторую постоянную переменную на устройстве пользователя, которую мы сможем проверить, как только мы запустим приложение - это простой сценарий.
Давайте сделаем кодирование сейчас
Прежде всего, вам нужно установить AsyncStorage, который предоставляется @ реагировать-родным-сообществом
Если вы используете пряжу, запустите эту yarn add @react-native-community/async-storage или если вы используя npm, запустите npm i -s @react-native-community/async-storage
Если вы используете React Native Version 0.60 или выше, вам не нужно связывать npm пакеты вручную:)
Если вы работаете на android, вы можете работать в обычном режиме, но вы работаете на iOS, вам нужно выполнить установку pod
Теперь импортируйте AsyncStorage, используя
import AsyncStorage from '@react-native-community/async-storage';
После этого необходимо сохранить электронная почта пользователя после успешного входа в систему
AsyncStorage.setItem('userEmail', JSON.stringify(UserEmail));
Теперь вы можете проверить журнал i c - если в локальном хранилище есть электронная почта пользователя, то пользователь регистрируется
Но здесь необходимо очистить локальное хранилище, когда пользователь нажал кнопку выхода из системы, используя AsyncStorage.clear()
ФИНАЛЬНЫЙ КОД
import React, { Component } from "react";
import {
StyleSheet,
TextInput,
View,
Alert,
Button,
Text,
AsyncStorage
} from "react-native";
// Importing Stack Navigator library to add multiple activities.
import { createStackNavigator, createAppContainer } from "react-navigation";
//Import Async Storage - Local Storage
import AsyncStorage from "@react-native-community/async-storage";
// Creating Login Activity.
class LoginActivity extends Component {
// Setting up Login Activity title.
static navigationOptions = {
title: "LoginActivity"
};
constructor(props) {
super(props);
this.state = {
UserEmail: "",
UserPassword: ""
};
}
//Check If the user is already logged or not
componentDidMount() {
//Get User Email From Local Storage
AsyncStorage.getItem("userEmail").then(data => {
if (data) {
//If userEmail has data -> email
this.props.navigation.navigate("Second", { Email: JSON.parse(data) }); //Navigate to Second Screen
}
});
}
UserLoginFunction = () => {
const { UserEmail } = this.state;
const { UserPassword } = this.state;
fetch("http://192.168.0.107/loginrn/User_Login.php", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
email: UserEmail,
password: UserPassword
//console.log('UserEmail')
})
})
.then(response => response.json())
.then(responseJson => {
// If server response message same as Data Matched
if (responseJson === "Data Matched") {
//Save User Details to Local Storage
AsyncStorage.setItem("userEmail", JSON.stringify(UserEmail));
//Then open Profile activity and send user email to profile activity.
this.props.navigation.navigate("Second", { Email: UserEmail });
} else {
Alert.alert(responseJson);
}
})
.catch(error => {
console.error(error);
});
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.TextComponentStyle}>User Login Form</Text>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter User Email"
onChangeText={UserEmail => this.setState({ UserEmail })}
// Making the Under line Transparent.
underlineColorAndroid="transparent"
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter User Password"
onChangeText={UserPassword => this.setState({ UserPassword })}
// Making the Under line Transparent.
underlineColorAndroid="transparent"
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button
title="Click Here To Login"
onPress={this.UserLoginFunction}
color="#2196F3"
/>
</View>
);
}
}
// Creating Profile activity.
class ProfileActivity extends Component {
// Setting up profile activity title.
static navigationOptions = {
title: "ProfileActivity"
};
//logout button click
logOutAction = () => {
const { goBack } = this.props.navigation;
AsyncStorage.clear(); // Clear the Async Storage Before Log out
goBack(null);
};
render() {
const { goBack } = this.props.navigation;
return (
<View style={styles.MainContainer}>
<Text style={styles.TextComponentStyle}>
{" "}
{this.props.navigation.state.params.Email}{" "}
</Text>
<Button
title="Click here to Logout"
onPress={() => this.logOutAction()}
/>
</View>
);
}
}
const AppNavigator = createStackNavigator({
First: { screen: LoginActivity },
Second: { screen: ProfileActivity }
});
export default createAppContainer(AppNavigator);
Если у вас есть какие-либо сомнения, не стесняйтесь спрашивать :) Happy Coding:)