Я перехожу с React на React Native, и пока что получил основы. В своем приложении я пытаюсь реализовать аутентификацию.

Я уже настроил свои рабочие API для входа и регистрации и проверил их с помощью POSTMAN .

Проблема здесь в том, что по какой-то причине onPress={onSignInHandler} ничего не делает. Обычно в React я бы вставлял onClick={onSignInHandler}, и все будет работать нормально.

Я хотел бы, чтобы при нажатии Login выполнялся запрос axios, а затем перенаправлялся, например, на компонент "Myprofil.js" или, по крайней мере, на отображение и предупреждение, чтобы увидеть, работает ли он. Как насколько мне известно, React Native использует react-navigation вместо react-router.

App.js :

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './src/views/Login';
import Signup  from './src/views/Signup ';
import MyProfil from './src/views/MyProfil';
 

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" screenOptions={{
    headerShown: false
  }}>
        <Stack.Screen name="Login" component={Login} /> 
        <Stack.Screen name="Signup " component={Signup} />
       <Stack.Screen name="MyProfil" component={MyProfil} />
      </Stack.Navigator> 
    </NavigationContainer>
  );
}

export default App;

Login.js:

import React, { Component, UseState } from 'react';
import { View, Text, TextInput, StyleSheet, Image, Dimensions, Alert } from 'react-native';
import axios from "axios";

const { width, height } = Dimensions.get('window');  

function Login() {

    const [state, setState] = React.useState({
        msg: "",
        isLoading: false,
        redirect: false,
        errMsgEmail: "",
        errMsgPwd: "",
        errMsg: "",
    });

    const [email, setEmail] = React.useState(""); 
    const [password, setPassword] = React.useState(""); 
 

     const handleChangeEmail = (event) => {
      setEmail(event.target.value);
     };

    const handleChangePassword = (event) => {
        setPassword(event.target.value);
    };

    function onSignInHandler() {
      const infos = {
        email: email,
        password: password,
    };
      axios
      .post("http://127.0.0.1:8000/api/login", infos)
        .then((response) => {
          if (response.data.status === 200) {
              localStorage.setItem("isLoggedIn", true);
              localStorage.setItem("userData", JSON.stringify(response.data.data));
            this.setState({
              msg: response.data.message,
              redirect: true,
            });      
          }
          if (
            response.data.status === "failed" &&
            response.data.success === undefined
          ) {
            this.setState({
              errMsgEmail: response.data.validation_error.email,
              errMsgPwd: response.data.validation_error.password,
            });
            setTimeout(() => {
              this.setState({ errMsgEmail: "", errMsgPwd: "" });
            }, 2000);
          } else if (
            response.data.status === "failed" &&
            response.data.success === false
          ) {
            this.setState({
              errMsg: response.data.message,
            });
            setTimeout(() => {
              this.setState({ errMsg: "" });
            }, 2000);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };

    return (
        <View
          style={{
            flex: 1,
            backgroundColor: 'white',
            justifyContent: 'flex-end'
          }}
        >

          <View style={{ ...StyleSheet.absoluteFill }}>

            <Image
              source={require('../images/bg.jpg')}
              style={{ flex: 1, height: null, width: null }}
            > 
            </Image>

          </View>
          <View style={{ height: height / 2, justifyContent: 'center' }}>
          <View>
              <Text style={{ fontSize: 20, fontWeight: 'bold', color:"#ffffff",fontSize: 30, marginHorizontal: 40,marginVertical: 10, }}>Bienvenue !</Text> 
            </View>
            <View style={styles.button}>
              <TextInput placeholder="E-mail " style={{ fontSize: 20, fontWeight: 'bold' }} value={email} onChange={handleChangeEmail}></TextInput>
            </View>

            <View style={styles.button}>
              <TextInput placeholder="Password" style={{ fontSize: 20, fontWeight: 'bold' }} secureTextEntry={true}  value={password} onChange={handleChangePassword}></TextInput>
            </View>

            <View style={{alignItems: 'center',justifyContent: 'center',  marginTop: 20}}>
              <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#ffffff' }} onPress={onSignInHandler}>
                LOGIN
              </Text>
            </View>
            
          </View>

        </View>

      );
  }

export default Login;


const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    button: {
      backgroundColor: 'white',
      height: 50,
      marginHorizontal: 30,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center',
      marginVertical: 10,
    }
  });
0
AlyaKra 12 Июн 2021 в 21:02

2 ответа

Лучший ответ

Вместо использования компонента onPress for Text оберните его TouchableOpacity и используйте onPress компонента TouchableOpacity.

<TouchableOpacity onPress={onSignInHandler}>
<Text style={{ fontSize: 20, fontWeight: 'bold', color: '#ffffff' }} title="Profil" >LOGIN</Text>
</TouchableOpacity>
1
Guruparan Giritharan 12 Июн 2021 в 19:56

Измени свой

function onSignInHandler() {

К

const onSignInHandler = () => {
0
j.f. 12 Июн 2021 в 20:01