react-native - React Native 应用程序中的组件异常

Question

登录屏幕.js

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native'
import { color } from 'react-native-reanimated'
import Button from 'react-native-elements'
import ValidationComponent from "react-native-form-validator"
import axios from 'axios'
import AsyncStorage from '@react-native-community/async-storage'



export default class LoginScreen extends ValidationComponent {

    render() {
        return (
                <View style = {{ 
                    width:'100%', 
                    height:'100%', 
                    justifyContent: 'center',
                    alignSelf: 'center', 
                    alignContent: 'center', 
                    alignItems: 'center' }}>
                        <Text style={styles.TextLogin}>DEW WATER</Text>
                    <TextInput placeholder={'Enter the user Name'}
                    onChangeText={(value) => this.setState({username : value})}
                    style={{ height:42, width:'80%', 
                    borderBottomWidth:1 }}/>
                    <TextInput placeholder={'Enter the user password'}
                    onChangeText={(value) => this.setState({password : value})}
                    style={{ height:42, width:'80%', 
                    borderBottomWidth:1, marginTop: '5%'}}/>
                    <View style={{
                        marginTop:'10%', 
                        width:'80%'}}>
                        <Button  titleStyle={{fontSize: 22,}} buttonStyle={{borderRadius:50,width:100,backgroundColor:'#307cee',marginBottom:5 }}  
                         onPress={this._onPressButton} color='white' title='LoginScreen'></Button>
                        <View style={styles.Signup}>
                            <Text style={[styles.textSignup, {color: 'gray'}]}>Don't have an account?</Text>
                            <TouchableOpacity
                            onPress = {() => {this.props.navigation.replace("RegisterScreen")}}>
                                <Text style={[styles.textSignup, {color:'#3465d9', marginLeft: 4}]}>Signup</Text>
                            </TouchableOpacity>
                        </View>
                        
                    </View>
                </View>
        )
    }
}
const styles =StyleSheet.create({
    TextLogin: {
        fontSize: 35,
        marginBottom: 60,
        opacity: 0.9,
        color:'#5f9ea0'

    },
    Signup: {
        marginTop: 25,
        flexDirection: 'row',
        justifyContent: 'center'
    },
    textSignup: {
        textAlign: 'center'
    }
})

应用程序.js

 import React from 'react'
    import { NavigationContainer } from '@react-navigation/native'
    import { createStackNavigator } from '@react-navigation/stack'
    
    import LoginScreen from './screens/LoginScreen'
    import RegisterScreen from './screens/RegisterScreen'
    import Template from './screens/Page/Template'
    
    const Stack = createStackNavigator();
    
    function App() {
            return(
                <NavigationContainer>
                    <Stack.Navigator>
                        <Stack.Screen name = 'Login' component = {LoginScreen}/>
                        <Stack.Screen name = 'Register' component = {RegisterScreen}/>
                        <Stack.Screen name = 'Template' component = {Template}/>
                    </Stack.Navigator>
                </NavigationContainer>
            )
        }
    
        export default App;

标签： react-native