反应本机中不同文件中的不同页面

Question

我对本机反应完全陌生，我只是想知道当涉及到其中的不同页面时我是否误解了什么。

我现在只是在玩它，但一切都在 app.js 文件夹中。有没有办法将单个页面放入不同的文件中，例如

主程序 about.js 等

我做了一个非常简单的应用程序，底部有一个导航菜单，它显示了功能页面。我希望这些功能在单个文件中。

这只是它的设计方式还是我只是不明白？这会让事情变得容易得多。

我在 app.js 中的简单代码是：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { WebView } from 'react-native-webview';
import Constants from 'expo-constants';

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

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

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

function Location() {
    return (
      <WebView
        style={styles.container}
        source={{ uri: 'https://www.google.com' }}
      />
    );
}

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

const Tab = createBottomTabNavigator();

function MyTabs() {
    return (
      <Tab.Navigator
        initialRouteName="Location"
        screenOptions={{
            tabBarActiveTintColor: '#e91e63',
        }}
      >
          <Tab.Screen
            name="Search"
            component={Search}
            options={{
                tabBarLabel: 'Search',
                tabBarIcon: ({ color, size }) => (
                  <MaterialCommunityIcons name="account-search" color={color} size={size} />
                ),
            }}
          />

          <Tab.Screen
            name="Notifications"
            component={Notifications}
            options={{
                tabBarLabel: 'Notification',
                tabBarIcon: ({ color, size }) => (
                  <MaterialCommunityIcons name="bell" color={color} size={size} />
                ),
            }}
          />
          <Tab.Screen
            name="Messages"
            component={Profile}
            options={{
                tabBarLabel: 'Messages',
                tabBarIcon: ({ color, size }) => (
                  <MaterialCommunityIcons name="message" color={color} size={size} />
                ),
            }}
          />

          <Tab.Screen
            name="Locationddsd"
            component={Location}
            options={{
                tabBarLabel: 'Location',
                tabBarIcon: ({ color, size }) => (
                  <MaterialCommunityIcons name="map-marker" color={color} size={size} />
                ),
            }}
          />

          <Tab.Screen
            name="Profile"
            component={Profile}
            options={{
                tabBarLabel: 'Account',
                tabBarIcon: ({ color, size }) => (
                  <MaterialCommunityIcons name="account" color={color} size={size} />
                ),
            }}
          />
      </Tab.Navigator>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Constants.statusBarHeight,
    },
});

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

我不是在寻求编码帮助，只是建议将它们添加到单独的文件中并调用它们。

先感谢您

Answer 1

如果有人需要，我在这里找到了一个很好的例子

https://snack.expo.dev/@aboutreact/bottom-navigation-example