如何在反应导航tabBarButton中添加onPress

Question

我在使用 @react-navigation/bottom-tabs

在 tabBarButton 中添加 onPress 时遇到问题

实际输出：每当我点击按钮时，它都会将我重定向到组件，尽管用户不是管理员或不允许查看

这是我的代码：

<Tab.Screen
   name="AdminDashboard"
   component={AdminDashboard}
   options={{
    title: "",
    tabBarLabel: "Admin Dashboard",
    tabBarButton: (props) =>
      !userAuthorized ? (
         <TouchableOpacity
          onPress={() => setPromptVisible(true)} // This is to trigger the prompt if user is not allowed to view admin dashboard
          {...props}
         />
       ) : (
          <TouchableOpacity {...props} />
       ),
                  
   }}
/>

预期输出：如果用户不是管理员或不允许，应该出现覆盖提示而不是重定向到 AdminDashboard 组件

Answer 1

你应该像下面那样做

tabBarButton: (props) => (
  <TouchableOpacity
    {...props}
    onPress={() => {
      if (!userAuthorized) {
        setPromptVisible(true);
      } else {
        props.onPress();
      }
    }}
  />
),

基本上props中的onPress会做重定向，你可以根据自己的情况调用，也可以调用自己的函数。确保 userAuthorized 在您的组件中。

如何在反应导航tabBarButton中添加onPress

How to add onPress in react navigation tabBarButton

react-native

react-navigation