Блог

Я сделал навигатор вкладок. Когда MyTabs отображается, компонент ленты и компонент уведомлений на вкладке.Экран выполняются, и console.log(«Лента») и console.log («Уведомления»); запускаются вместе.

Тем не менее, я хочу, чтобы запускался только console.log («Лента»), так как отображается только компонент feedScreen, когда нажата только вкладка «Лента». Я хочу, чтобы только console.log («Уведомления») выполнялся только при нажатии на вкладку «Уведомления». Возможно ли это?

это мой код

             import {NavigationContainer} from '@react-navigation/native';
            import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

            function FeedScreen() {
            console.log('Feed');
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>Feed!</Text>
                </View>
            );
            }

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

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



            const Tab = createMaterialTopTabNavigator();

            function MyTabs() {
            return (
                <Tab.Navigator
                initialRouteName="Feed"
                screenOptions={{
                    tabBarActiveTintColor: '#e91e63',
                    tabBarLabelStyle: {fontSize: 12},
                    tabBarStyle: {backgroundColor: 'powderblue'},
                }}>
                <Tab.Screen
                    name="Feed"
                    component={FeedScreen}
                    options={{tabBarLabel: 'Home'}}
                />
                <Tab.Screen
                    name="Notifications"
                    component={NotificationsScreen}
                    options={{tabBarLabel: 'Updates'}}
                />
                   <Tab.Screen
                    name="Hey"
                    component={Hey}
                    options={{tabBarLabel: 'Hey'}}
                />
                </Tab.Navigator>
            );
            }
            export default () => {
            return (
                <NavigationContainer>
                <MyTabs />
                </NavigationContainer>
            );
            };
 

@react-navigation/material-top-tabs Пакет используется react-native-tabs под капотом. Вы можете включить функцию экрана отложенной загрузки, предоставив lazy ссылку на Tab.Navigator определение.

Просто обновите до

 <Tab.Navigator
  initialRouteName="Feed"
  screenOptions={{
    tabBarActiveTintColor: '#e91e63',
    tabBarLabelStyle: {fontSize: 12},
    tabBarStyle: {backgroundColor: 'powderblue'},
    lazy: true // ADD THIS
  }}
>
 

Или взгляните на Живую закуску

Вы можете прочитать больше об этом на панели вкладок материалов опция — Навигация по реакции