reactjs - 在本机反应中调用文件路径时出错。

Question

我决定将我拥有的每个 react native 组件和屏幕嵌套在它自己指定的子文件夹中。问题是当我在另一个文件中导入反应原生组件时，它给了我这个错误：ios Simulator，我正在立即导入所有内容。我多次检查路径以确保一切正确。此外，在我的导航文件中，我使用相同的文件路径并且一切正常。这就是我的文件夹和子文件夹嵌套在 src 文件下的方式：结构文件。这是我的导航文件（这个文件中的所有内容都正确导入，我猜是因为它在 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 文件夹下的另一个文件中导入文件时，我可能做错了，但我需要有人准确指出我做错了什么。

标签： reactjsreact-nativeroutingreact-navigation

Answer 1

使用相对路径导航并不难:)

所以如果你想导入一些东西 eG 'ProfileScreen' + 'BarCode' 到 WelcomeScreen

您的文件应如下所示：

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

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

{...}

"./.." = 向上一层（如"cd .."）

所以你总是从你要导入的文件的位置开始（在这种情况下是 './src/components/screens/WelcomeScreen/WelcomeScreen.js'）

所以你从'./src/components/screens/WelcomeScreen/'开始

通过执行“./../../”，您可以访问“./src/components/”

从这里你必须去'./common/BarCode/''BarCode.js'所在的地方

缩短并把你全部放在：

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