如何调用主应用程序文件的函数？反应原生

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();

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

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

谢谢。

更新：

这是我的标签文件。

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'

要获得如何为选项卡添加背景颜色的建议，请点击此处：How to set the background color of Tab.Navigator?

Answer 2

你基本上像调用组件一样调用它

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

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

export default Tabs

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

}