在我的 App.js 之外导入文件 - React Native

Question

我是 React Native 的新手，目前正在尝试使用 Expo 创建食谱应用程序。我正在寻找一种解决方案来缩短我在 App.js 中的导入时间，因为它们都在同一个文件夹中。它看起来像：

import Ampalaya from "./recipes/Ampalaya";
import AdobongSitaw from "./recipes/AdobongSitaw";
import BananaQue from "./recipes/BananaQue";
import Bibingka from "./recipes/Bibingka";
import BukoPie from "./recipes/BukoPie";

这就是我使用这些导入的所有内容的方式：

<NavigationContainer>
        <StatusBar style="auto" />
        <Stack.Navigator>

          <Stack.Screen
            name="Ampalaya"
            component={Ampalaya}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="AdobongSitaw"
            component={AdobongSitaw}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="BananaQue"
            component={BananaQue}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="Bibingka"
            component={Bibingka}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
          <Stack.Screen
            name="BukoPie"
            component={BukoPie}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>

Answer 1

作为一个选项，您可以在“屏幕”文件夹中创建 index.js 文件，然后在文件中进行所有导出，例如：

// index.js
export * from './Home'

// Home.js
import react from 'react'
import {View, Text} from 'react-native'

export const Home = () => {
  return (
   <View><Text> Home </Text></View>
  )
}

export default Home

// App.js
import {Home, Banana, etc} from './Screens'

或像这样导入：

// Home.js
import { StyleSheet, Text, View } from 'react-native';
import React from 'react';

export const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({});

//index.js
export * from './Home'
export * from './Banana'`

App.js:

import React from 'react';
import * as Screens from './screens'

const App = () => {
  return (
      <Screens.Home />
  );
};

export default App;

Answer 2

你可以这样做

import {Ampalaya, AdobongSitaw, BananaQue, Bibingka, BukoPie} from "./recipes";

Answer 3

您可以使用大括号导入许多组件{}

import { a, b, c, d } from '../your file name'

在我的 App.js 之外导入文件 - React Native

Importing files outside my App.js - React Native

import

react-native