Блог

У меня есть проект React Native. Моя проблема в том, что при успешном входе в систему с экрана входа в систему я перехожу на главный экран. Здесь у меня есть нижняя вкладка навигатора, включающая главную страницу и профиль. Я хочу показать информацию о пользователе в профиле, но я не знаю, как это сделать. Кто-нибудь может дать мне несколько идей?

Вот мой код

 import React, {useState} from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  TextInput,
  Alert,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import Account from '../component/Account';


const {width: WIDTH} = Dimensions.get('window');
const Login = (props) => {
  let [email, setEmail] = useState('');
  let [password, setPassword] = useState('');
  let [isFocused, setIsFocused] = useState(0);
  const _onPress = (index) => {
    setIsFocused(index);
  };
 
  const dangnhap = (params) => {
    if (email.length == 0 || password.length == 0) {
      Alert.alert('Thông Báo', 'Hãy nhập đầy đủ email và mật khẩu');
      return;
    }
    try {
      fetch('http://192.168.1.10:8080/api/auth/signin', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json ; charset=utf-8',
        },
        body: JSON.stringify(params),
      })
        .then((response) => response.json())
        .then((responseJson) => {
          console.log(responseJson);
          if (responseJson.status == 200) {
            props.navigation.push('Home', email);
            props.navigation.navigate('Home');
            
          } else {
            Alert.alert('Thông báo', 'Đăng nhập thất bại');
          }
        });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <ScrollView style={{backgroundColor: 'white'}}>
      <View style={styles.container}>
        <Image
          source={require('../assets/images/login.png')}
          resizeMode="center"
          style={styles.image}
        />
        <Text style={styles.textTitle}>Chào mừng trở lại</Text>
        <Text style={styles.textBody}>Đăng nhập vào tài khoản sẵn có</Text>
        <View style={{marginTop: 10}} />
        <View style={styles.inputContainer}>
          <Icon
            name="mail"
            size={25}
            color="#59B7C9"
            style={styles.inputIcon}
          />
          <TextInput
            onChangeText={(value) => setEmail(value)}
            placeholder="Email"
            style={[
              styles.input,
              {borderColor: isFocused == 1 ? '#59B7C9' : 'black'},
            ]}
            onFocus={() => _onPress(1)}
          />
        </View>

        <View style={styles.inputContainer}>
          <Icon
            name="lock-closed"
            size={25}
            color="#59B7C9"
            style={styles.inputIcon}
          />
          <TextInput
            placeholder={'Mật khẩu'}
            pass={true}
            onChangeText={(value) => setPassword(value)}
            style={[
              styles.input,
              {borderColor: isFocused == 2 ? '#59B7C9' : 'black'},
            ]}
            secureTextEntry={true}
            onFocus={() => _onPress(2)}
          />
        </View>

        <View style={{width: '90%'}}>
          <TouchableOpacity
            onPress={() => props.navigation.navigate('Forgot')}
            style={([styles.textBody], {alignSelf: 'flex-end'})}>
            <Text style={[styles.textBody, {color: 'blue'}]}>
              Quên mật khẩu?
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.buttonLogin}
            onPress={() => {
              const newUser = {
                Email: email,
                Password: password,
              };
              dangnhap(newUser);
            }}>
            <Text style={styles.buttonText}>Đăng nhập</Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.textBody}>Hoặc kết nối với</Text>
        <View style={{flexDirection: 'row'}}>
          <Account color="#3b5c8f" icon="facebook" title="Facebook" />
          <Account color="#ec482f" icon="google" title="Google" />
        </View>
        <View style={{flexDirection: 'row', marginVertical: 5}}>
          <Text style={styles.textBody}>Chưa có tài khoản?</Text>
          <Text
            style={[styles.textBody, {color: 'blue'}]}
            onPress={() => props.navigation.navigate('Signup')}>
            Đăng ký
          </Text>
        </View>
      </View>
    </ScrollView>
  );
};
  

Это может помочь

 import {AsyncStorage} from 'react-native';  


if (responseJson.status == 200) {
            AsyncStorage.setItem('email', 'email@email.com');  
            props.navigation.navigate('Home');
            
}
  

Profile.js

 import { AsyncStorage } from 'react-native'; 


export default const Profile = props => {

  const [email, setEmail] = useState('');

  useEffect(() => {
    retrieveData();
  }, []);

 const retrieveData = async () => {
      const email = await AsyncStorage.getItem('email');
      setEmail(email);
  };

  render(){
    return {
    <View>
      <Text>{email}</Text>
    </View>
    }
  } 

}