React Native 底部选项卡导航器。 tabBarButton: () => {} 选项不起作用

Question

我有一个问题。当我将 Tab 导航器与单独的 Tab.Screen 一起使用时，我应该有一个选项 tabBarButton，如 here 所述。但是当我尝试使用它时，它会抛出一个错误。

代码如下：

<Tab.Screen
    options={{
      tabBarIcon: ({ focused }) => {
        return (
          <TabIcon
            focused={focused}
            icon={icons.trade}
            isTrade
            label='Trade'
          />
        );
      },
      tabBarButton: (props) => {
        <TouchableOpacity {...props} onPress={() => console.log('wa')}>
          <Text>Touch</Text>
        </TouchableOpacity>;
      },
    }}
    name='Trade'
    component={Home}
  />

此处堆栈错误： enter image description here

写成 useFonts.js 的来源有时会发生变化。我认为此文件不会导致错误。当我删除 tabBarButton 选项时，它可以正常工作。

顺便说一下，我正在为此使用 EXPO

Answer 1

您必须 return tabBarButton 回调中的组件。这可以通过两种方式完成：

通过添加 return 语句：

    tabBarButton: (props) => {
        return <TouchableOpacity {...props} onPress={() => console.log('wa')}>
          <Text>Touch</Text>
        </TouchableOpacity>;
      },

或删除回调的括号并使其成为隐式 return:

    tabBarButton: (props) => <TouchableOpacity {...props} onPress={() => console.log('wa')}>
          <Text>Touch</Text>
        </TouchableOpacity>,