React Native - 底部选项卡导航器 - 错误 - 传递内联函数会导致组件状态在 re-render 上丢失？

Question

我有一个堆栈导航器，其中包含一个底部选项卡导航器。底部选项卡导航器的第一个选项卡还包含一个 TopTab 导航器。

这样做是为了显示顶部选项卡和底部选项卡。其他每个底部选项卡屏幕都会打开一个新屏幕。

这是代码：（包含底部选项卡导航器的堆栈导航器）

const StackNav = createNativeStackNavigator();
function Main() {
    return (
       <NavigationContainer>
          <StackNav.Navigator>
              <StackNav.Screen
                  name="BottomTab"
                  component={BottomTabScreen}
                  options={{
                     headerTitle: props => <LogoTitle {...props} />,
                     headerBlurEffect: 'dark',
                  }}
             />
         </StackNav.Navigator>
     </NavigationContainer>
   );
  }

底部选项卡导航器在下方（第一个选项卡包含嵌入式顶部选项卡导航器 TopTabScreen 以显示 header，其余选项卡在底部显示选项卡）

const BottomTabScreen = () => {
  return (
    <BottomNav.Navigator barStyle={{backgroundColor: '#febe00'}}>
      <BottomNav.Screen
        name="Home"
        component={TopTabScreen}
        options={{
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
          labelStyle: {textTransform: 'none'},
          upperCaseLabel: false,
        }}
      />
      <BottomNav.Screen
         name="MyInitiatives"
         component={InitiativesScreen}
         options={{
            tabBarIcon: ({color, size}) => (
            <IonIcons name="rocket-outline" color={color} size={26} />
            ),
         }}
      />

      <BottomNav.Screen 
        name="Contact-Whatsapp" 
        component={() => null}
        listeners={{
          tabPress: (e) => {
                             e.preventDefault();
                             console.log("tabPress tabTwo");
                             let link = 'https://wa.me/xxx';
                             Linking.openURL(link);
          },
        }}
        options={{
           tabBarIcon: ({color,size}) => (
               <FontAwesome name="whatsapp" color={color} size={26} />
           ),
        }}  
     />         
   </BottomNav.Navigator>
  );
 };

因此在底部选项卡上 - 将显示三个选项卡：

主页 - 显示嵌入 header

的选项卡

MyInitiatives - 单击时显示单独的视图

Contact-Whatsapp - 这是一个选项卡，我试图显示它在单击时应该打开什么应用程序而不是新屏幕，所以点击选项卡 - 我不想要任何 'component' 渲染，而不是简单地打开什么应用程序注意 - whatsapp 正在打开但收到此警告：

WARN  Looks like you're passing an inline function for 'component' prop for the screen 
'Whatsapp' 
(e.g. component={() => <SomeComponent />}). Passing an inline function will cause the 
component state to be lost on re-render and cause perf issues since it's re-created every 
render. You can pass the function as children to 'Screen' instead to achieve the desired 
behaviour.

所以问题是： #1 我该如何解决这个问题？我如何确保在单击底部选项卡时 - 它应该打开 link（在本例中 - whatsapp）而不是尝试打开组件/视图？

Answer 1

出现警告的原因是您将函数而不是函数名称传递给组件属性。您可以将任何组件名称放在那里，因为 e.preventDefault() 它不会被打开。您可以只创建一个小的虚拟组件并传入名称。即使是 component={View} 也能胜任。

React Native - 底部选项卡导航器 - 错误 - 传递内联函数会导致组件状态在 re-render 上丢失？

React Native - Bottom Tab Navigator - error - Passing an inline function will cause the component state to be lost on re-render?

react-native

react-navigation-bottom-tab