javascript - estilo - reaccionar nativo-se esperaba una clase de componente, obtuve

javascript estilo

Question

Me esperaba que una clase de componente obtuviera un error de objeto cuando trato de usar el componente loginPage que creé.

aquí está index.ios.js

import React, {Component} from ''react'';

import {
    AppRegistry,
    View
} from ''react-native'';

import loginPage from ''./pages/loginPage''

class app extends Component {
    render() {
        return (
            <View>
                <loginPage/>
            </View>
        );
    }
}

AppRegistry.registerComponent(''app'', () => app);

y aquí está el loginPage.js

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

export default class loginPage extends Component {
    render() {
        return (
            <View>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
}

Answer 1

Necesita cambiar el nombre de su clase LoginPage a LoginPage , la clase debe estar en mayúscula

Answer 2

eliminar las etiquetas en index.ios.js

import React, {Component} from ''react'';

import {
    AppRegistry,
    View
} from ''react-native'';

import loginPage from ''./pages/loginPage''

class app extends Component {
    render() {
        return (

                <loginPage/>

        );
    }
}

AppRegistry.registerComponent(''app'', () => app);

Answer 3

loginPage.js

import React from ''react'';
import {
    Text,
    View
} from ''react-native'';

const LoginPage = () => {
    return (
        <View>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
    );
}
export default LoginPage;

index.ios.js

import React, {Component} from ''react'';

import {
    AppRegistry,
    View
} from ''react-native'';

import LoginPage from ''./pages/loginPage''

class app extends Component {
    render() {
        return (
            <View>
                <LoginPage/>
            </View>
        );
    }
}