如何在反应导航自定义标签栏组件上调度操作

Question

我想在自定义我的标签栏导航器上的按钮上发送一个动作，由于反应导航文档，我们不能在自定义标签栏组件中使用钩子 .有人有这样做的想法吗？

Answer 1

首先你需要阻止tab bar的默认动作，然后你可以调用你自己的函数或任何组件。

  <Tab.Screen
    name="More"
    component={Sleep}
    options={{
      tabBarLabel: <Text style={stylee.Fontfamily}>More</Text>,
      tabBarIcon: ({color}) => (
        <Icon name="menu-outline" color={color} size={ms(23)} />
      ),
    }}
    listeners={({navigation}) => ({
      tabPress: event => {
        event.preventDefault();     //preventing dafault.
        navigation.openDrawer();    //calling custom 

      },
    })}
  />
</Tab.Navigator>

请记住，您需要提供一个组件（组件为空或只是一个文本都可以）。