Question

我正在努力使我的本机应用程序模块化，从而创建JSX文件作为组件。这是我的App.js

  import React from 'react';
  import Header from './components/Header';
  import { StyleSheet, Text, View } from 'react-native';

  export default class App extends React.Component {
    render() {
     return (
       <View style={styles.container}>
        <Header/>
      </View>
     );
   }
  }

 const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
      },
   });

在App.js所在的Root文件夹中，我有一个名为component的文件夹和一个名为Header.jsx的JSX文件。 Header文件看起来像这样

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

  class Header extends React.Component {
   render() {
    return <Text>This is a header component</Text>;
     }
    }

 export default Header;

但我收到此错误Failed building JavaScript bundle. Unable to resolve ./components/Header" from ".//App.js：无法解决/Users/mycomputer/Desktop/myapps/moviedbapp/components/Header' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"

我很确定导入文件和文件夹的路径是正确的。我不知道我做错了什么，请帮忙。

Answer 1

尝试像这样导入：

import Header from './components/Header.jsx';

Answer 2

您没有在Header.jsx的return语句中使用括号

  class Header extends React.Component {
   render() {
     return (
       <Text>This is a header component</Text>
       )
     }
    }

使用它。

是否可以在React native中将组件导入为单独的文件？

2 个答案: