The component for the 'Profile' route needs to be an React type component

Asked

Viewed 39 times

-1

inserir a descrição da imagem aqui

App.js

import React from 'react';
import { StatusBar } from 'react-native';

// Importação das rotas
import Routes from './src/routes';

export default function App() {
  return (
    <>
      <StatusBar barStyle="light-content" backgroundColor="#7d40e7"></StatusBar>
      <Routes></Routes>
    </>
  );
}


Main.js

import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

function Main() {
    useEffect(() => {
        async 
    }, []);

    return <MapView style={styles.map}></MapView>
}

const styles = StyleSheet.create({
    map: {
        flex: 1 //mapa ocupa a tela inteira
    },
});

export default Main;


Profile.js

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

function Profile() {
    return <View></View>
}

export default Profile;


routes.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// Importação das páginas da aplicação
import Main from './pages/Main';
import Profile from './pages/Profile';

const Routes = createAppContainer(
    createStackNavigator({
        Main: {
            screen: Main, //qual componente será renderizado
            navigationOptions: {  //opções específicas dessa tela
                title: 'DevRadar'
            }
        },
        Profile: {
            scree: Profile,
            navigationOptions: {
                title: 'Perfil no Github'
            }
        }
    }, {
        defaultNavigationOptions: {  //opções de navegação aplicadas a todas as telas
            headerTintColor: '#FFF',
            headerStyle: {
                backgroundColor: '#7d40e7'
            }
        }
    })
);

export default Routes;  //exportar as rotas

1 answer

1


In your route file, there is a small spelling error in the word "screen"

Profile: {
            scree: Profile,
            navigationOptions: {
                title: 'Perfil no Github'
            }
        }

The right thing would be:

Profile: {
            screen: Profile,
            navigationOptions: {
                title: 'Perfil no Github'
            }
        }

Regarding the error message, I recommend you change the main and the profile to classes that inherit the "Component" class from React. Try to do it this way:

Main.js

import React, { Component, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

class Main extends Component {
    useEffect(() => {
        async 
    }, []);

    render() {
        return (<MapView style={styles.map}></MapView>)
    }
}

const styles = StyleSheet.create({
    map: {
        flex: 1 //mapa ocupa a tela inteira
    },
});

export default Main;


Profile.js

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

class Profile extends Component {
    render() {
        return (<View></View>(
    }   
}

export default Profile;
  • Thanks, it worked out, I’m starting with React, React Native and Node yet

Browser other questions tagged

You are not signed in. Login or sign up in order to post.