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

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

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

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

Примечания

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

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

Примечание 3.При создании выставочного проекта:

expo init (project name)

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

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

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

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

Начиная

Если вы забыли, как создать экспо-проект, посмотрите примечание 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 = "https://(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 и передайте параметр для «Имя пользователя»:

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 = "https://(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.

Оригинальный логин.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 = "https://(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 = "https://(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

Если вам понравилась эта статья и если она помогает вам передавать данные на другие экраны в вашем проекте React Native, помогите другим, поделившись. Для получения дополнительных статей, связанных с проектами React Native, следуйте Советам по программированию здесь, на среде. Комментируйте любые отзывы, вопросы или опасения, которые могут у вас возникнуть.

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

let { name } = this.props.route.params;
console.log(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.log(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, комментируя.

Исследовать:

Передача параметров в маршруты | Реагировать навигацию

«reactjs — Как передать данные на другой экран/класс в React Native? - Переполнение стека"

«Как передать данные через навигацию по стеку на конкретный экран на нативных вкладках React? - Переполнение стека"

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 на русском

Как исправить ошибки «Функции недействительны в качестве дочернего элемента React — веб-подсказки»

«javascript — Как отправить и отобразить значение ввода текста на другом экране с помощью собственного реагирования? - Переполнение стека"

«javascript — React-router — Как передавать данные между страницами в React? - Переполнение стека"

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