Передача данных экрана регистрации и входа в систему на другой экран в React Native

RedDeveloper
30.12.2022 10:01
Передача данных экрана регистрации и входа в систему на другой экран в React Native

Это было непросто. На то, чтобы понять, как передавать данные на несколько экранов, у меня ушло четыре полных разочарования дня. В интернете полно решений, но ни одно из них не помогло мне. Большинство статей, которые я прочитал, были посвящены передаче данных 'TextInput', которые не были подключены к базе данных MySQL.

Однако, после многих неудачных попыток, я разобрался с передачей данных для регистрации/логина. Конечно, подведение итогов нескольких дней работы в одной быстрой статье - это цель Советы по программированию . Я хочу помочь вам сэкономить время.

Если вы создали свой sign-up и login экран, используя мои другие статьи, теперь мы будем отображать имя пользователя на экране Dashboard. Я добавлю все свои исследования для информационных наркоманов в конце этой статьи.

Picture of ‘Dashboard’ screen on my computer

Примечания

Примечание 1 - Мы не будем концентрироваться на дизайне и добавлять что-то в нашу таблицу стилей. Функциональность стоит на первом месте, красота - потом. Это будет голый экран приборной панели, но не стесняйтесь добавлять в свою собственную таблицу стилей.

Примечание 2 - Я не буду показывать изображение Signup.js или login.js, чтобы защитить конфиденциальную информацию (IP-адрес).

Примечание 3 - При создании проекта expo:

expo init (project name)

Вы должны дать имя проекту. Вы не можете просто оставить '(название проекта)'. Это просто заполнитель для того, где должно быть ваше имя.

Примечание 4 - Если вы столкнулись с какими-либо ошибками при создании проекта, вот статья , где вы можете найти решения. Если есть ошибки, которые не были упомянуты, прокомментируйте их ниже, чтобы они были освещены в будущих статьях.

Примечание 5 - В этой статье все файлы JavaScript являются классами, расширяющими Component.

Примечание 6 - Убедитесь, что вы создали Dashboard.js внутри папки screen в вашем проекте.

Начало работы

Если вы забыли, как создать проект expo, обратитесь к примечанию 3. Если при создании проекта возникли ошибки, обратитесь к примечанию 4.

Для того, на что у меня ушло четыре дня, это удивительно просто. Все, что нам нужно сделать, это изменить некоторые вещи в Signup.js и Login.js и добавить в 'Dashboard.js'.

Оригинальный Sign-up.js

import React, {Component} from 'react';
import { TextInput, View, StyleSheet, TouchableOpacity, Text } from 'react-native';

export default class Signup extends Component {
    constructor(props) {
        super(props);
        this.state = {FirstName: '', LastName: '', Username: '', Email: '', Password: ''};
      }
      btnPress = () => {
        this.props.navigation.navigate('Dashboard')
      }
      InsertRecord = () => {
        var FirstName = this.state.FirstName;
        var LastName = this.state.LastName;
        var Username = this.state.Username;
        var Email = this.state.Email;
        var Password = this.state.Password;
    
        if (FirstName.length == 0 || Username.length == 0|| Email.length == 0 || Password.length == 0) {
          alert("Required field is missing");
        } else {
          this.btnPress();
          alert("Success");

          var InsertAPIURL="http://(IP)/(folder with php file)/(php file name)";

          var header = {
            'Accept' : 'application/json',
            'Content-Type' : 'application/json'
          };
    
          var Data = {
           FirstName:FirstName,
           LastName:LastName,
           Username:Username,
           Email:Email,
           Password:Password
          };

          fetch(InsertAPIURL, {
            method: 'Post',
            headers: header,
            body: JSON.stringify(Data)
    
          })

          .then((response) => response.json())
          .then((response) => {
            alert(response[0].message);
          })
          .catch((error) => {
            alert("Error" + error);
          })
        }
    
      }
        render(){
            return(
                <View style = {styles.ViewStyle}>
                    <TextInput 
                    placeholder = {"FirstName"}
                    keyboardType = {"default"}
                    onChangeText = {FirstName => this.setState({FirstName})}
                    />
                    <TextInput 
                    placeholder = {"LastName"}
                    keyboardType = {"default"}
                    onChangeText = {LastName => this.setState({LastName})}
                    />
                    <TextInput 
                    placeholder = {"Username"}
                    keyboardType = {"default"}
                    onChangeText = {Username => this.setState({Username})}
                    />
                    <TextInput 
                    placeholder = {"Email"}
                    keyboardType = {"email-address"}
                    onChangeText = {Email => this.setState({Email})}
                    />
                    <TextInput 
                    placeholder = {"Password"}
                    keyboardType = {"visible-password"}
                    onChangeText = {Password => this.setState({Password})}
                    />
                    <TouchableOpacity
                    onPress = {this.InsertRecord}
                    underlayColor = '#fff'
                    >
                      <Text>Sign Up</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Внесение изменений

Вместо функции 'btnPress' добавьте навигацию на экран 'Dashboard' внутри оператора '.length' if и передайте параметр 'Username':

if (FirstName.length == 0 || Username.length == 0|| Email.length == 0 || Password.length == 0) {
  alert("Required field is missing");
} else {
  this.props.navigation.navigate('Dashboard', { name: Username });
  alert("Success");

// There should be other code after this snippet

Полный код с изменениями

import React, {Component} from 'react';
import { TextInput, View, StyleSheet, TouchableOpacity, Text} from 'react-native';

export default class Signup extends Component {
  
    constructor(props) {
        super(props);
        this.state = {FirstName: '', LastName: '', Username: '', Email: '', Password: ''};
      }
      InsertRecord = () => {
        var FirstName = this.state.FirstName;
        var LastName = this.state.LastName;
        var Username = this.state.Username;
        var Email = this.state.Email;
        var Password = this.state.Password;
    
        if (FirstName.length == 0 || Username.length == 0|| Email.length == 0 || Password.length == 0) {
          alert("Required field is missing");
        } else {
          this.props.navigation.navigate('Dashboard', { name: Username });
          alert("Success");

          var InsertAPIURL="http://(IP)/(folder with php file)/(php file name)";

          var header = {
            'Accept' : 'application/json',
            'Content-Type' : 'application/json'
          };
    
          var Data = {
           FirstName:FirstName,
           LastName:LastName,
           Username:Username,
           Email:Email,
           Password:Password
          };

          fetch(InsertAPIURL, {
            method: 'Post',
            headers: header,
            body: JSON.stringify(Data)
    
          })

          .then((response) => response.json())
          .then((response) => {
            alert(response[0].message);
          })
          .catch((error) => {
            alert("Error" + error);
          })
        }
      }
        render(){
            return(
                <View style = {styles.ViewStyle}>
                    <TextInput 
                    placeholder = {"FirstName"}
                    keyboardType = {"default"}
                    onChangeText = {FirstName => this.setState({FirstName})}
                    />
                    <TextInput 
                    placeholder = {"LastName"}
                    keyboardType = {"default"}
                    onChangeText = {LastName => this.setState({LastName})}
                    />
                    <TextInput 
                    placeholder = {"Username"}
                    keyboardType = {"default"}
                    onChangeText = {Username => this.setState({Username})}
                    />
                    <TextInput 
                    placeholder = {"Email"}
                    keyboardType = {"email-address"}
                    onChangeText = {Email => this.setState({Email})}
                    />
                    <TextInput 
                    placeholder = {"Password"}
                    keyboardType = {"visible-password"}
                    onChangeText = {Password => this.setState({Password})}
                    />
                    <TouchableOpacity
                    onPress = {this.InsertRecord}
                    underlayColor = '#fff'
                    >
                      <Text>Sign Up</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Теперь мы сделаем практически то же самое для Login.js.

Оригинальный Login.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {Username: '', Password: '', check_textInputChange : false, secureTextEntry : true};
  }
  btnPress = () => {
    this.props.navigation.navigate('Dashboard')
  }
  InsertRecord=()=>{
    var Username = this.state.Username;
    var Password = this.state.Password;

    if ((Username.length==0) || (Password.length==0)) {
      alert("Required Field Is Missing!!!");
    } else {


      var APIURL="http://(IP)/(the folder that contains login php)/(the name of the login php)";

      var header = {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
      };

      var Data = {
        Username: Username,
        Password: Password
      };

      fetch(APIURL,{
        method: 'Post',
        headers: header,
        body: JSON.stringify(Data)
      })
      
      .then((response)=>response.json())
      .then((response)=> {
        if (response[0].Message == "Success") {
          this.btnPress();
        } 
        else {
          alert("This account does not exist");
        }

      })
      .catch((error)=>{
        console.error("Error" + error);
      })
    }
  }
  updateSecureTextEntry(){
    this.setState({
      ...this.state,
      secureTextEntry: !this.state.secureTextEntry
    });
  }
  render() {
    return(
      <View style = {styles.container}>
         <TextInput 
          placeholder = {"Username"}
          keyboardType = {"default"}
          onChangeText = {Username => this.setState({Username})}
          />
         <TextInput 
          placeholder = {"Password"}
          keyboardType = {"default"}
          secureTextEntry = {this.state.secureTextEntry ? true : false}
          onChangeText = {Password => this.setState({Password})}
          />
          <TouchableOpacity
          underlayColor = '#fff'
          onPress = {()=>{this.InsertRecord()}}>
          <Text> Login </Text>
          </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Внесение изменений

Снова удалите функцию 'btnPress', добавьте навигацию к экрану 'Dashboard' внутри оператора 'response' if и передайте параметр для 'Username':

.then((response)=>response.json())
.then((response)=> {
if (response[0].Message == "Success") {
  this.props.navigation.navigate('Dashboard', { name: Username });
} 
else {
  alert("This account does not exist");
}
})

// There should be other code after this snippet

Полный код с изменениями

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {Username: '', Password: '', check_textInputChange : false, secureTextEntry : true};
  }
  InsertRecord=()=>{
    var Username = this.state.Username;
    var Password = this.state.Password;

    if ((Username.length==0) || (Password.length==0)) {
      alert("Required Field Is Missing!!!");
    } else {


      var APIURL="http://(IP)/(the folder that contains login php)/(the name of the login php)";

      var header = {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
      };

      var Data = {
        Username: Username,
        Password: Password
      };

      fetch(APIURL,{
        method: 'Post',
        headers: header,
        body: JSON.stringify(Data)
      })
      
      .then((response)=>response.json())
      .then((response)=> {
        if (response[0].Message == "Success") {
          this.props.navigation.navigate('Dashboard', { name: Username });
        } 
        else {
          alert("This account does not exist");
        }
      })
      
      .catch((error)=>{
        console.error("Error" + error);
      })
    }
  }
  updateSecureTextEntry(){
    this.setState({
      ...this.state,
      secureTextEntry: !this.state.secureTextEntry
    });
  }
  render() {
    return(
      <View style = {styles.container}>
         <TextInput 
          placeholder = {"Username"}
          keyboardType = {"default"}
          onChangeText = {Username => this.setState({Username})}
          />
         <TextInput 
          placeholder = {"Password"}
          keyboardType = {"default"}
          secureTextEntry = {this.state.secureTextEntry ? true : false}
          onChangeText = {Password => this.setState({Password})}
          />
          <TouchableOpacity
          underlayColor = '#fff'
          onPress = {()=>{this.InsertRecord()}}>
          <Text> Login </Text>
          </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

На этом изменения закончены. Далее нам нужно создать файл 'Dashboard.js'

Dashboard.js

Посмотрите на Note 6. Все, что нам нужно сделать на этом экране, - это отобразить имя пользователя. Внутри метода render():

let { name } = this.props.route.params;
console.info(JSON.stringify(name));
  return(
    <View style = {styles.container}>
    <Text>Hello</Text>
    <Text>{name}</Text>
    <StatusBar style="auto" />
    </View>
);

Полный код

import React, {Component} from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default class Dashboard extends Component {
    render() {
      let { name } = this.props.route.params;
      console.info(JSON.stringify(name));
        return(
          <View style = {styles.container}>
            <Text>Hello</Text>
            <Text>{name}</Text>
            <StatusBar style="auto" />
          </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Рисунок для Dashboard.js находится в верхней части статьи.

Заключение

Запустите ваше приложение

npm start

Чтобы увидеть, что мы сделали на данный момент.

Спасибо за прокрутку. Не забудьте поделиться этой статьей, если она была вам полезна. Вы можете оставлять любые отзывы, вопросы, опасения и обсуждения о React Native в комментариях.

Спасибо за прокрутку Не забудьте поделиться этой статьей если она была вам полезна ВыPhoto by Jexo on  Unsplash

Исследование:

Передача параметров в маршруты | React Navigation

reactjs - Как передать данные на другой экран/класс в react Native? - Stack Overflow

Как передать данные через стековую навигацию на определенный экран на вкладках react native? - Stack Overflow

React Native StackNavigator Pass & Get Params to Screen (positronx.io)

Как передавать данные между страницами в react-router-dom V6? (plainenglish.io)

react native - Как передать данные от логина на другую страницу - Stack Overflow

reactjs - Передача реквизита TextInput между разными экранами в React Navigation - Stack Overflow

Как исправить ошибку 'Functions are not valid as React child' - Webtips

javascript - Как отправить и отобразить значение текстового ввода на другом экране с помощью нативного реакта? - Stack Overflow

javascript - React-router - Как передавать данные между страницами в React? - Stack Overflow

https://stackoverflow.com/questions/33492943/global-variable-constant-in-react-native

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.