react-native - 如何在 React Navigation 5 的选项卡导航中传递空屏幕

Question

在以前版本的 react 导航中，我们可以这样做

const CustomTabNavigator = createBottomTabNavigator({
    FirstTab: {
        screen: FirstScreen,
    },
    AddButton: {
        screen: () => null,
        navigationOptions: () => ({
            tabBarIcon: (<AddButton/>),
            tabBarOnPress: () => {}
        })
    },
    SecondTab: {
        screen: SecondScreen,
    }
}

尝试使用react-navigation复制此内容会导致错误，因为它不接受null。有人知道解决这个问题的方法吗？

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
const BottomTabNavigator = createBottomTabNavigator()

<BottomTabNavigator.Navigator>
            <BottomTabNavigator.Screen
                name="FirstTab"
                component={FirstScreen}
            />
            <BottomTabNavigator.Screen
                name="Add"
                component={null}
                options: () => ({
                   tabBarIcon: (<AddButton/>),
                   tabBarOnPress: () => {}
                })
            />
            <BottomTabNavigator.Screen
                name="Second Tab"
                component={SecondScreen}
            />
        </BottomTabNavigator.Navigator>

Answer 1

试试这个，我最初尝试将它作为内联函数传递，但我也收到了警告。这解决了我的问题。

示例:

const AddButton = () => {
  return null
}

<Tab.Screen name="AddButton" component={AddButton}/>