React Native - 文件永远编译（可能是无限循环？）

Question

不久前我开始使用 React Native 编写代码，我偶然发现了这个问题，我已经坚持了三天多了。我的文件永远编译。消息是“正在编译...”并且永远不会结束，而且在编译时，我的 RAM 100% 都被使用了，所以我认为这是一个无限循环，因为代码很小所以我不知道还有什么导致我的电脑如此努力地工作。无论如何，这是我的代码：

App.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from './Registration/Registration.js';

class Application extends Component {
    render() {
        return (
            <div>
                <View style={styles.container}>
                    <Registration />
                </View>
            </div>
        );
    }
}
export default Application;

Registration.js

import React, { Component } from 'react';
import { TextInput, TouchableOpacity, StyleSheet, Text, View } from 'react-native';

class Br extends Component {
    render() {
        return <Text>{'\n'}</Text>;
    }
}
class Register extends Component {
    state = {
        PWshow: false,
        togglePWtext: 'Show Password'
    }
    togglePW = () => {
        if (this.state.PWshow == false) {
            this.setState({ togglePWtext: 'Hide Password' })
            this.setState({ PWshow: true })
        } else {
            this.setState({ togglePWtext: 'Show Password' })
            this.setState({ PWshow: false })
        }
    }
    render() {
        return (
            <View>
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Username" 
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Phone Number" 
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "E-mail" 
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Password" 
                    secureTextEntry = {!this.state.PWshow}
                />
                <Br />
                <TextInput 
                    style = {styles.textInput}
                    placeholder = "Re-enter password" 
                    secureTextEntry = {!this.state.PWshow}
                />
                <Br />
                <TouchableOpacity style = {styles.button}>
                    <Text>Register</Text>
                </TouchableOpacity>
                <Br />
                <TouchableOpacity 
                style = {styles.button}
                onPress = {this.togglePW}>
                    <Text>{this.state.togglePWtext}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    textInput: {
        borderWidth: 1,
        borderColor: 'black'
    },
    button: {
        width: 100,
        height: 50,
        borderWidth: 1,
        backgroundColor: 'lightblue',
        borderColor: 'black'
    }
});

export default Register;

我想用我的代码做的是创建一个注册页面。

Answer 1

<div> 是一个 HTML 元素，在 React Native 中是无效的。如果您需要容器，请使用 <View>.

Answer 2

我找到了！还要感谢凯，他帮助了一件事情。实际上，我的代码中有多个我没有注意到的错误。首先（感谢 Kai），我替换为因为是 HTML 元素，而不是 React Native 元素。其次，我的 class 组件被调用了，但我在 App.js 中用 .最后，我删除了 style = {styles.container} 因为我没有在 App.js 中定义样式，它只是我错误地留在其中的东西。再次感谢凯！

React Native - 文件永远编译（可能是无限循环？）

React Native - File compiling forever (maybe infinite loop?)

registration

jsx

reactjs

react-native