嵌套在抽屉中时选项卡导航滞后

Question

我在抽屉中嵌套选项卡时遇到问题。不幸的是，导航到每个选项卡都很慢，而且它们似乎有很多延迟。

但是，当我删除抽屉导航器并使其成为唯一的选项卡导航器时，在不同选项卡屏幕之间导航明显更好。

How can I make it so that their is no delay between the tabs when the tabs are nested in to the drawer?

{ *

在 Mateusz 的帮助下，我设法查明了问题所在。我通过渲染四个相同的组件来测试延迟。第一个测试使用

 children={() => {
           return <NfcWifiConfig />;
         }}

延迟仍然存在

但是后来，当我使用

component={NfcWifiConfig}

延迟完全消失，导航运行顺畅如预期。所以我现在的问题是，我从这里去哪里？我将如何使用此语法传递道具？

}

我当前的代码是：

const DrawerComponent = ({
  Bunch of props here
}) => {
  return (

    <Drawer.Navigator
      drawerType="back"

      drawerContent={(props) => {
        return (
          <DrawerContent
            {...props}
          />
        );
      }}
     >

      {/* TABS */}

      <Drawer.Screen
        name="MainHome"
        children={({navigation}) => {
          return (
            <>
              <StatusBar backgroundColor={homeColor} barStyle="dark-content" />
              <Navbar navigation={navigation} userimage={userimage} />
              <Tabs.Navigator>

              {/* HOME STACK */}
              <Tabs.Screen
                name="Profile"
                children={() => {
                  return (
                    <>
                       <MainStackNavigator
                         {Bunch of props here}
                        />
                     </>
                    ;
                 }}
               />

               {/* SEARCH SCREEN */}
               <Tabs.Screen
                  name="Search"
                  children={() => {
                    return (
                      <>
                       <StatusBar barStyle="dark-content" />
                       <SearchStack
                        { Bunch of props here }
                       />
                     </>
                    );
                  }}
                />

                {/* NFC-SOCIAL SCREEN */}
                <Tabs.Screen name="Activate" component={NfcConfig} />

                {/* NFC-WIFI SCREEN */}
                <Tabs.Screen name="WiFi" component={NfcWifiConfig} />

              </Tabs.Navigator>
            </>
          );
        }}
      />

      {/* Add Links Screen */}

      <Drawer.Screen
        name="Add Links"
        children={({navigation}) => {
          return (
            <AddLinksScreen
               { Bunch of props here }
            />
          );
        }}
      />

      {/* Following Screen */}

      <Drawer.Screen
        name="Followers"
        children={({navigation}) => {
          return (
            <FollowerStack
              { Bunch of props here }
            />
          );
        }}
      />

      {/* Following Screen */}

      <Drawer.Screen
        name="Following"
        children={({navigation}) => {
          return (
           <FollowingStack
             { Bunch of props here }
           />
          );
        }}
      />

    </Drawer.Navigator>
  );
};

此外，添加链接屏幕和 followers/following 屏幕工作正常。导航到它们可以高效无延迟地工作。但是选项卡 => 主页堆栈、搜索屏幕和其他两个在它们之间导航时会有严重的延迟。

从标签里面的内容来看，最后两个标签很轻，内容不多。我尝试过注释掉繁重的选项卡屏幕并仅使用两个轻量级组件，但结果相同。让我相信这不是问题。

Answer 1

所以我设法解决了这个问题。当我使用：

 children={() => {
           return <NfcWifiConfig props{props} />;
         }}

存在延迟。但是，当我使用：

component={NfcWifiConfig}

延迟消失了。但是，我的道具没有通过。所以我所做的是使用 React Context 将我的 props 传递给所有需要它的不同组件，仅此而已，延迟消失了，组件正在按我的需要接收 props。

此外，使用 React 上下文时代码更清晰，因此我强烈推荐它。

嵌套在抽屉中时选项卡导航滞后

Tab navigation lag when nested in drawer

react-native

react-navigation

react-navigation-drawer

react-navigation-bottom-tab