Не удается импортировать реагирующий компонент из другого компонента

Question

Я открыл новый собственный реактивный проект, используя expo (Boilerplate). Я добавил новый компонент с именем «Test» и не могу импортировать его из Homescreen.

это 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 или обратиться к этому Как разрешить реагировать на включение поддержки файлов JSX (расширение)