Передача данных экрана регистрации и входа в систему на другой экран в 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