如果日志记录成功,如何呈现导入的组件并杀死以前的组件以提高性能?这是我的代码
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',
}
});
我不知道。有人可以解释我该怎么做吗?我在谷歌搜索,但根本不理解。有一些评论可以解释我的问题.......................................... ....