Question

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

但是，当我移除 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>
  );
};

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

就tabs里面的内容而言，最后两个tabs很轻，内容不多。我曾尝试注释掉重标签屏幕并仅使用两个轻量级组件，但结果相同。让我相信这不是问题。

Answer 1

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

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

存在滞后。但是，当我使用：

component={NfcWifiConfig}

延迟消失了。然而，我的道具没有被传递。所以我所做的是使用 React Context 将我的 props 传递给所有需要它的不同组件，就是这样，延迟消失了，组件按照我的意愿接收了 props。

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

嵌套在抽屉中时选项卡导航延迟

1 个答案: