是否可以在按下选项卡时使其呈现？在本机？

Question

我制作了一个标签导航器。当 MyTabs 被渲染时，Tab.Screen 中的 Feed 组件和 Notifications 组件被执行，并且 console.log('Feed') 和 console.log('Notifications'); 运行在一起。

但是，我只想制作 console.log('Feed') 运行，因为只有单击 Feed 选项卡时才会呈现 feedScreen 组件。我只想在单击通知选项卡时只执行 console.log('Notifications')。这可能吗？

这是我的代码

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

Answer 1

@react-navigation/material-top-tabs 包在后台使用 react-native-tabs。您可以通过向 Tab.Navigator 定义提供 lazy 属性来启用延迟加载屏幕功能。

只需更新为

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

或者看看Live Snack

您可以在 Material Tab bar option - React Navigation

阅读更多相关信息

是否可以在按下选项卡时使其呈现？在本机？

Is it possible to make it render when the tab is pressed? in react-native?

javascript

node.js

reactjs

react-native

react-navigation