в ответ на родной хотят получить данные домашней страницы в соответствии с зарегистрированным в электронной почте

Question

В моем проекте я вошел в систему с паролем электронной почты, после чего я хочу получить данные домашней страницы в соответствии с зарегистрированной электронной почтой. API вернет данные ответа для указанного пользователя c в useState ( ) я прошел stati c электронное письмо, которое мне нужно изменить Dynami c Код домашней страницы:

```import React,{useState} from 'react';
import { Button} from 'react-native-paper';
import {
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  KeyboardAvoidingView,
  Alert
} from 'react-native';

const ProductScreen = (props) => {
 const [email]= useState('test@xyz.com')    
  const sendCred = async (props)=>{
    fetch("http://test.com:70/api/productForClient",{
      method:"POST",
      headers: {        
        'Accept': 'application/json',
        'Content-Type':'application/json'
      },
     body:JSON.stringify({
       "email":email,
      })
    })
    .then(res=>res.json())
    .then((data)=>{
      console.log("*****************************", data)
    })
 }

 return (
   <> 
   <KeyboardAvoidingView behavior="position">
     <StatusBar backgroundColor="blue" barStyle="light-content" />
      <Text 
      style={{fontSize:35,marginLeft:18,marginTop:10,color:"#3b3b3b"}}>welcome to</Text>

      <Button 
        mode="contained"
        style={{marginLeft:18,marginRight:18,marginTop:18}}
       onPress={() => sendCred(props)}>
        Get Data
      </Button>      
      <TouchableOpacity>
        <Text
      style={{
        fontSize:18,marginLeft:18,marginTop:20
      }}
      onPress={()=>props.navigation.replace("signup")}
      >dont have a account ?</Text>
      </TouchableOpacity>

      </KeyboardAvoidingView>
   </>
  );
};
export default ProductScreen;```

Answer 1

когда пользователь входит в систему с электронной почтой и паролем, если вход в систему успешен, передайте письмо со страницы входа на домашнюю страницу, а затем на домашней странице используйте маршруты prop, чтобы получить письмо, затем сделайте свое дело,

здесь простой пример

Страница входа

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

  const navigation = useNavigation();

  const login = () => {
    // Login to server on Success
    // call navigation.navigate
    navigation.navigate('Home', { email })
  };

  return (
    <View style={styles.container}>
      <Button title="Login" onPress={login}/>
    </View>
  );
};

Домашняя страница

import React, { useEffect } from 'react';
import {useRoute} from '@react-navigation/native'
import {View, Text, StyleSheet} from 'react-native';

const Home = () => {

  const route = useRoute();

  useEffect(() => {
    const email = route.params.email;
    // get Data from  the server
  }, [])

  return (
    <View style={{flex: 1}}>
      <Text>Home</Text>
    </View>
  );
};

Answer 2

Просто внесите небольшие изменения.

Передайте email с экрана входа в систему на домашний экран, как показано в примере ниже;

 this.props.navigation.navigate('Home',{email: "You Email Id using"});

И не нужно показывать электронную почту по умолчанию. Просто сделай что-то вроде этого

import React,{useState} from 'react';
import _ from 'lodash'; // use can you any other if you like instead of lodash
import { Button} from 'react-native-paper';
import {
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  KeyboardAvoidingView,
  Alert
} from 'react-native';

const ProductScreen = (props) => {
// Retrive email from props. `_.get` method only check if data not available the // set `undefined`. 
 const [email]= useState(_.get(props.navigation, 'state.params.email'));    
  const sendCred = async (props)=>{
    fetch("http://test.com:70/api/productForClient",{
      method:"POST",
      headers: {        
        'Accept': 'application/json',
        'Content-Type':'application/json'
      },
     body:JSON.stringify({
       "email":email,
      })
    })
    .then(res=>res.json())
    .then((data)=>{
      console.log("*****************************", data)
    })
 }

 return (
   <> 
   <KeyboardAvoidingView behavior="position">
     <StatusBar backgroundColor="blue" barStyle="light-content" />
      <Text 
      style={{fontSize:35,marginLeft:18,marginTop:10,color:"#3b3b3b"}}>welcome to</Text>

      <Button 
        mode="contained"
        style={{marginLeft:18,marginRight:18,marginTop:18}}
       onPress={() => sendCred(props)}>
        Get Data
      </Button>      
      <TouchableOpacity>
        <Text
      style={{
        fontSize:18,marginLeft:18,marginTop:20
      }}
      onPress={()=>props.navigation.replace("signup")}
      >dont have a account ?</Text>
      </TouchableOpacity>

      </KeyboardAvoidingView>
   </>
  );
};
export default ProductScreen

Answer 3

На экране входа в систему укажите адрес электронной почты в заявлении о навигации.

Как:

 this.props.navigation.navigate('Home',{email: "You Email Id using"});

И на главном экране используйте его как:

fetch("http://test.com:70/api/productForClient",{
  method:"POST",
  headers: {        
    'Accept': 'application/json',
    'Content-Type':'application/json'
  },
 body:JSON.stringify({
   "email":props.navigation.state.params.email,
  })
})

Существует еще одна альтернатива: установите адрес электронной почты в AsyncStorage при входе в систему и получайте доступ к нему из AsyncStorage всякий раз, когда вы захотите его использовать.

Еще одна альтернатива - это использовать redux и сохранять электронную почту в своем магазине redux, и доступ к нему, где вы хотите его использовать.