在函数中调用文件的内容

Question

我是React Native Expo的初学者，我正在寻找一种方法来发布这个函数内的文件内容:

function HomeScreen() {
return (
// Here
);
}

我该怎么做?

我尝试了各种代码组合，并尝试在createBottomTabNavigator函数的官方代码中查找:https://reactnavigation.org/docs/bottom-tab-navigator

，但似乎没有任何类似的东西。它们只显示了我在实际代码中也有的函数。

这是完整的文件:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Home } from './screens/home';
import { Archivio } from './screens/archivio';
import { Sfide } from './screens/sfide';
import { Profilo } from './screens/profilo';

function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function ArchivioScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Archivio!</Text>
</View>
);
}
function SfideScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Sfide!</Text>
</View>
);
}

function ProfiloScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Profilo!</Text>
</View>
);
}

const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;

if (route.name === 'Home') {
iconName = focused
? 'home'
: 'home-outline';
} else if (route.name === 'Archivio') {
iconName = focused ? 'grid' : 'grid-outline';
} else if (route.name === 'Sfide') {
iconName = focused ? 'flame' : 'flame-outline';
} else if (route.name === 'Profilo') {
iconName = focused ? 'person-circle' : 'person-circle-outline';
}

// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#E26DA0',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Archivio" component={ArchivioScreen} />
<Tab.Screen name="Sfide" component={SfideScreen} />
<Tab.Screen name="Profilo" component={ProfiloScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

感谢那些能帮助我的人，很抱歉问了这么愚蠢的问题，但我才刚刚开始。

Answer 1

首先将文件导入到要渲染的位置

import myFunctionalComponent from "./components/path to component"

呈现:

<myFunctionalComponent />
// Or
<myFunctionalComponent> </myFunctionalComponent>

还要确保在创建时导出了功能组件。

export function myFunction() {}
// or add 
export default myFunction
// to the bottom of the file