javascript - How to fix Error 'You Likely forgot to export your component from the file..etc' error in React-Nat

admin管理员组

文章数量:1344238

I am importing ponent from another file to implement it in App.js file, But Unfornatuley getting this error:

Here the code:https: (header.js file):

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

const Header = () => <Text> Hello Ahmed </Text>;


export default Header;

(App.js) code:

import React from 'react';
import { View } from 'react-native';
import Header from './src/ponents/header';

const App = () => (
    <View>

       <Header />

    </View>

);

export default App;

It works Well Here(/@ahmed105/tenacious-coffee), But I am getting the error when running the app on my device using atom.

Any help will be appreciated.

I am importing ponent from another file to implement it in App.js file, But Unfornatuley getting this error: https://ibb.co/41ynFGX

Here the code:https: (header.js file):

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

const Header = () => <Text> Hello Ahmed </Text>;


export default Header;

(App.js) code:

import React from 'react';
import { View } from 'react-native';
import Header from './src/ponents/header';

const App = () => (
    <View>

       <Header />

    </View>

);

export default App;

It works Well Here(https://snack.expo.io/@ahmed105/tenacious-coffee), But I am getting the error when running the app on my device using atom.

Any help will be appreciated.

• javascript
• react-native
• expo

Share Improve this question Follow edited Apr 13, 2019 at 11:53 Ahmed Limona asked Apr 13, 2019 at 3:59 Ahmed LimonaAhmed Limona 6311 gold badge11 silver badge77 bronze badges 5

• I don't see any problem in ur definition. What is the react and node version you are using? – Rahul Commented Apr 13, 2019 at 7:02
• Basically React Stateless function definition is supported on React.14 and above, any lower version may not support it. – Rahul Commented Apr 13, 2019 at 7:07
• @Rahul react-native-cli 2.0.1 and node: v11.13.0 – Ahmed Limona Commented Apr 13, 2019 at 11:49
• Thank You Very Much, This is the problem, everything went well once I updated the version of React. – Ahmed Limona Commented Apr 13, 2019 at 12:19
• Cool Happy Coding :) – Rahul Commented Apr 13, 2019 at 12:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Hey change your code to this it will work.

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

export default Header = () => {
    return (
        <Text>
            Hello Ahmed
        </Text>
    );
};

The error has been solved As the problem Was not related to the code itself, The problem was related to React Version. As @Rahul said: "Basically React Stateless function definition is supported on React.14 and above, any lower version may not support it.

So I had updated React by this mand: npm install react@latest and everything is going well now.

The error says that:

Check the render method of 'App'

So try to export App as a class ponent and put your code in its render method:

App.js

import React, {Component} from 'react';
import { View } from 'react-native';
import Header from './ponents/header';

export default class App extends Component {
    render = () => {
        return (
            <View>
                <Header />
            </View>
        );
    }
}

You might get this error if you are using MapView from expo. so use: react-native-maps

npm install react-native-maps --save-exact

yarn add react-native-maps -E

and, import MapView from 'react-native-maps';

本文标签：