React-Native中无法导入组件

Question

我是 react-native 的新手并尝试使用 expo-cli 尝试我的第一个应用程序，我正在尝试使用反应导航在屏幕之间跳转，但我在尝试导入我的屏幕组件时遇到问题，即 HomeScreen。

我收到以下错误：

Unable to resolve "/screens/HomeScreen.js" from "App.js"

我的文件夹结构如下： https://i.imgur.com/c2gqTFt.png

这是我的 App.js 文件：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '/screens/HomeScreen';

const navigator = createStackNavigator(
{
    Home: HomeScreen
},
{
  initialRouteName:'Home',
  defaultNavigationOptions:
  {
    title:'App'
  }

}
);

我的主屏幕组件：

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


export default function HomeScreen()
{
  return (
    <View style={styles.container}>
      <Text>Pero esto que es</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Answer 1

import HomeScreen from './screens/HomeScreen';

在开头添加./意味着您开始在您所在的文件夹中导航。

如果您需要 go 后退一步，则应添加../

因此，从App.js ，现在您需要导航到HomeScreen所在的文件夹。