条件渲染和终止组件React Native

时间:2019-10-27 21:53:51

标签: javascript reactjs react-native

如果日志记录成功,如何呈现导入的组件并杀死以前的组件以提高性能?这是我的代码

import React, { Component } from 'react';
import Marks from './Marks';
import { StyleSheet, Text, TextInput, Alert, TouchableOpacity, KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback } from 'react-native';

export default class LoginMenu extends Component {

  constructor() {
    super()
    this.state = {
      username: '',
      password: '',
      isLoggedIn: false
    }

    this.dataCheck = this.dataCheck.bind(this);
    this.fetchData = this.fetchData.bind(this);
  }

  fetchData() {
    //here will be fetching data from API and if response is true, it will change this.state.isLoggedIn to true
  }

  //checking if guest typed username and password or TextInput is empty
  dataCheck() {
    if (this.state.username && this.state.password) {
      if (this.state.isLoggedIn) {
        //here missing code which i don't know how to write, i want to render imported Marks component and kill somehow this component to reduce memory usage
      }
    } else {
      Alert.alert("Błędne dane!", "Wprowadź dane!");
    }
  }

  render () {
    return (
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <KeyboardAvoidingView style={styles.container} behavior="padding">
          <TextInput style={styles.username} autoCapitalize="none" placeholder="e-mail" placeholderTextColor = "#fff" onChangeText={ input => this.setState({ username: input }) } />
          <TextInput style={styles.password} autoCapitalize="none" placeholder="password" placeholderTextColor = "#fff" onChangeText={ input => this.setState({ password: input }) } />
          <TouchableOpacity style={styles.loginButton} onPress={this.dataCheck}>
            <Text style={styles.loginText}>Login</Text>
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </TouchableWithoutFeedback>
    );
  };
}

  const styles = StyleSheet.create({
    container: {
      alignItems: 'center',
      justifyContent: 'center',
      position: 'relative',
      width: '100%',
      height: '100%',
    },
    username: {
      fontSize: 24,
      fontWeight: '100',
      width: 200,
      borderBottomWidth: 5,
      borderBottomColor: '#1EF7A1',
      borderRadius: 5,
      textAlign: 'center',
      color: '#fff',
      padding: 10,
      position: 'absolute',
      top: '30%',
      left: '50%',
      marginLeft: -100,
    },
    password: {
      fontSize: 24,
      fontWeight: '100',
      width: 200,
      borderBottomWidth: 5,
      borderBottomColor: '#1EF7A1',
      borderRadius: 5,
      textAlign: 'center',
      color: '#fff',
      padding: 10,
      position: 'absolute',
      top: '45%',
      left: '50%',
      marginLeft: -100,
    },
    loginButton: {
      position: 'absolute',
      width: 150,
      height: 70,
      top: '60%',
      left: '50%',
      marginLeft: -75,
      borderBottomWidth: 5,
      borderTopWidth: 5,
      borderLeftWidth: 5,
      borderRightWidth: 5,
      borderColor: '#1EF7A1',
      borderRadius: 25,
      justifyContent: 'center',
      alignItems: 'center',
    },
    loginText: {
      fontSize: 24,
      color: '#fff',
      fontWeight: '100',
    }
});

我不知道。有人可以解释我该怎么做吗?我在谷歌搜索,但根本不理解。有一些评论可以解释我的问题.......................................... ....

0 个答案:

没有答案