如何防止在react-native material-top-tabs-navigatior中重新渲染?

b1zrtrql  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(120)

我正在使用材料顶部选项卡导航https://reactnavigation.org/docs/material-top-tab-navigator
当我切换选项卡时,组件总是被重新呈现。我怎样才能防止重新呈现?
这是我代码,请帮助我!2!3!4!

const Menu = () => {
   return (...)
}

const Info = () => {
   return (...)
}

const Review = () => {
   return (...)
}

       <Tab.Navigator 
           screenOptions={{
               tabBarScrollEnabled: false,
               tabBarStyle: { backgroundColor: '#FFFFFF' },
               tabBarPressOpacity: true
           }}
           style={styles.tabBar}
       >
            <Tab.Screen
               name="Menu"
               component={Menu}
               options={{
                   tabBarShowLabel: false,
                   tabBarIcon: ({ forcused, color }) => {
                   return <Text style={styles.tabBarText}>메뉴</Text>;
                   },
               }}
           />
           <Tab.Screen
               name="Info"
               component={Info}
               options={{
                   tabBarShowLabel: false,
                   tabBarIcon: ({ forcused, color }) => {
                   return  <Text style={styles.tabBarText}>정보</Text>;
                   },
               }}
           />
           <Tab.Screen
               name="Review"
               component={Review}
               options={{
                   tabBarShowLabel: false,
                   tabBarIcon: ({ forcused, color }) => {
                   return  <Text style={styles.tabBarText}>리뷰</Text>;
                   },
               }}
           />
       </Tab.Navigator>
py49o6xq

py49o6xq1#

这篇文章有点老了,但是对于那些面临同样问题的人来说,你可以尝试在导航器(或屏幕)中添加lazy选项。

const Tab = createMaterialTopTabNavigator();

<Tab.Navigator 
  screenOptions={{
    tabBarScrollEnabled: false,
    tabBarStyle: { backgroundColor: '#FFFFFF' },
    tabBarPressOpacity: true,
    lazy: true                 // add the option here 
  }}
  style={styles.tabBar}
>
...

重新启动服务器,屏幕现在只在进入viewPort时呈现。您也可以在启用lazy时使用lazyPreloadDistance
这是官方文件

相关问题