在React Native中调用文件路径时出错。

Question

我决定将我拥有的每个反应本机组件和屏幕嵌套在其自己的指定子文件夹中。问题是，当我在另一个文件中导入react native组件时，它给了我这个错误：ios Simulator，并且我正在立即导入所有内容。我多次检查路径，以确保一切正确。此外，在我的导航文件中，我使用相同的文件路径，并且一切正常。这是我的文件夹和子文件夹嵌套在src文件structure of files下的方式。这是我的导航文件（所有文件都正确导入了该文件，我猜是因为它在src文件之外）：

import React from 'react';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import WelcomeScreen from './src/components/screens/WelcomeScreen/WelcomeScreen';
import ProfileScreen from './src/components/screens/ProfileScreen/ProfileScreen';
import RegistrationScreen from './src/components/screens/RegistrationScreen/RegistrationScreen';
import RecieveMenuScreen from './src/components/screens/RecieveMenuScreen/RecieveMenuScreen';
import SendDetailsScreen from './src/components/screens/SendDetailsScreen/SendDetailsScreen';
import SendAddressScreen from './src/components/screens/SendAddressScreen/SendAddressScreen';
import SendShipmentScreen from './src/components/screens/SendShipmentScreen/SendShipmentScreen';
import SendOverviewScreen from './src/components/screens/SendOverviewScreen/SendOverviewScreen';
import SendReceiptScreen from './src/components/screens/SendReceiptScreen/SendReceiptScreen';
import SettingsScreen from './src/components/screens/SettingsScreen/SettingsScreen';

const WelcomeStack = createStackNavigator({
	Welcome: {
		screen: WelcomeScreen,
		navigationOptions: {
			header: null
		}
	}
});

const SendStack = createStackNavigator({
	SendDetails: {
		screen: SendDetailsScreen,
		navigationOptions: {
			headerTitle: 'Enter Details'
		}
	},
	SendAddress: {
		screen: SendAddressScreen,
		navigationOptions: {
			headerTitle: 'Shipment Address'
		}
	},
	SendShipment: {
		screen: SendShipmentScreen,
		navigationOptions: {
			headerTitle: 'Send Shipment'
		}
	},
	SendOverview: {
		screen: SendOverviewScreen,
		navigationOptions: {
			headerTitle: 'Shipment Overview'
		}
	},
	SendReceipt: {
		screen: SendReceiptScreen,
		navigationOptions: {
			headerTitle: 'Shipment Details'
		}
	}
});

const RecieveStack = createStackNavigator({
	RecieveMenu: {
		screen: RecieveMenuScreen,
		navigationOptions: {
			headerTitle: 'Incoming Shipments'
		}
	}
});

const ProfileStack = createStackNavigator({
	Profile: {
		screen: ProfileScreen,
		navigationOptions: {
			headerTitle: 'Profile'
		}
	}
});

const SettingsStack = createStackNavigator({
	Settings: {
		screen: SettingsScreen,
		navigationOptions: {
			headerTitle: 'Settings'
		}
	}
});

export const Tabs = createBottomTabNavigator({
	Recieve: {
		screen: RecieveStack,
		navigationOptions: {
			tabBarLabel: 'Recieve',
			tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />
		}
	},
	Send: {
		screen: SendStack,
		navigationOptions: {
			tabBarLabel: 'Send',
			tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
		}
	},
	Profile: {
		screen: ProfileStack,
		navigationOptions: {
			tabBarLabel: 'Profile',
			tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
		}
	},
	View: {
		screen: SettingsStack,
		navigationOptions: {
			tabBarLabel: 'View',
			tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
		}
	}
});

export const Routes = createStackNavigator({
	Welcome: {
		screen: WelcomeStack,
		navigationOptions: {
			header: null
		}
	},
	Registration: {
		screen: RegistrationScreen,
		navigationOptions: {
			headerTitle: 'Registration'
		}
	},
	Profile: {
		screen: Tabs,
		navigationOptions: {
			header: null
		}
	}
});

当我将文件导入到src文件夹下的另一个文件中时，我可能做错了，但是我需要有人准确地指出我在做什么。

Answer 1

使用相对路径导航并不难：）

因此，如果您想导入某些内容，例如'ProfileScreen'+'BarCode'到WelcomeScreen

您的文件应如下所示：

./ src / components / screens / WelcomeScreen / WelcomeScreen.js'

import BarCode from './../../common/BarCode/BarCode';
import ProfileScreen from './../ProfileScreen/ProfileScreen';

{...}

“ ./ ..” =向上一层（如“ cd ..” ）

soo总是从您要导入的文件的位置开始 （在本例中为'./ src / components / screens / WelcomeScreen / WelcomeScreen.js'）

所以您从“ ./src/components/screens/WelcomeScreen/”开始

通过执行“ ./../../” ，您将进入'./ src / components /'

，然后从这里转到'./ common / BarCode /'，其中'BarCode.js'位于

缩短并把所有的一切都放在下面：

'./../../ common / BarCode / BarCode'