如何调用 function 到主 App 文件？ 反应原生

Question

我刚刚开始学习 React Native。 我正在尝试在我的第一个应用程序上插入底部菜单选项卡。

我在 Tabs.js 上使用此代码（这只是导出部分）：

export default function Tabs() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

不幸的是，我不知道如何将它调用到我的主 App 文件中（这只是我的尝试之一）：

import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';

Tabs();

我已阅读有关导出默认 function 的信息，但我不明白如何在我的主 App 文件中使用它。 我确定这是一个语法问题。

另外，我计划为所有选项卡添加背景颜色。 有什么建议吗？

谢谢你。

更新：

这是我的标签文件。

 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 { MaterialCommunityIcons } from '@expo/vector-icons'; const Tabs = () => { function Feed() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text></Text> </View> ); } function Profile() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text></Text> </View> ); } function MainPage() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text></Text> </View> ); } const Tab = createBottomTabNavigator(); function MyTabs() { return ( <Tab.Navigator initialRouteName="Feed" tabBarOptions={{ activeTintColor: '#e91e63', }} > <Tab.Screen name="Feed" component={Feed} options={{ tabBarLabel: '', tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="home" color={color} size={size} /> ), }} /> <Tab.Screen name="MainPage" component={MainPage} options={{ tabBarLabel: '', tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="pill" color={color} size={size} /> ), }} /> <Tab.Screen name="Profile" component={Profile} options={{ tabBarLabel: '', tabBarIcon: ({ color, size }) => ( <MaterialCommunityIcons name="format-list-text" color={color} size={size} /> ), }} /> </Tab.Navigator> ); } return ( <NavigationContainer> <MyTabs /> </NavigationContainer> ); } export default Tabs

这是我的主要应用程序文件。

import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';

const App=()=>{
 return <Tabs />
}

Answer 1

确保将应用程序导出为默认值。 您很可能在根文件夹中有一个名为 index.js 的文件，它正在导入您的 App 组件。

您的 App.js 文件应如下所示：

import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';

export default const App=()=>{
 return <Tabs />
}

然后你的 index.js 文件看起来像这样：

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

您不一定要默认导出，因为您只能有一个默认导出。 如果您将 App 导出为默认值，您可以像这样导入它： import App from './App'; 如果你没有默认导出，你必须像这样导入： import {App} from './App'

要获得如何为选项卡添加背景颜色的建议，请查看此处： 如何设置 Tab.Navigator 的背景颜色？

Answer 2

你基本上把它叫做组件

顺便说一句，您的标签应该像这样导出

const Tabs=()=>{
  /...
}

export default Tabs

const App=()=>{
 return <Tabs />    

}