Question

我使用expo（样板）打开了一个新的react native项目。我添加了一个名为“测试”的新组件，但无法从主屏幕导入它。

这是Homescreen.js：

import * as WebBrowser from 'expo-web-browser';
import React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

import {Test} from '../components/test/Test';

export const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Test/>
    </View>
  );
};

Test.jsx：

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

export const Test = () => {
    return (
        <View>
            <Text>Test Works!</Text>
        </View>
    )
};

构建项目时，出现以下错误： Unable to resolve "../components/test/Test" from "screens/HomeScreen.js"

我希望Test组件具有与上述相同的结构（带有箭头功能的const）。

我在做什么错？如何导入测试？

谢谢！

Answer 1

您的Test.jsx仅导出组件Test，而不导出对象（export { Test }）。导入时，使用

import Test from '../components/test/Test'

代替

import {Test} from '../components/test/Test';

Answer 2

默认情况下，React Native无法识别jsx文件。您可以将文件更改为Test.js，也可以参考此How to allow react-native to enable support for JSX (extension) files

Answer 3

把 '../components/test' 而不是 './components/test' 添加另一个点。

无法从另一个组件导入React组件

3 个答案: