在 React Native 的选项卡底部导航流中的任何屏幕上打开模式

Question

我遇到了反应本机 tabBottom 导航的问题。我有一个 TabButton 自定义组件，单击后会呈现模式，但我似乎找不到一种在其他选项卡上呈现特定模式的方法，而不仅仅是呈现为独立的组件。

\n

我想要实现的是，当我单击黄色按钮时，它会呈现模式，但像（主页、帮助、调整和图形）这样的选项卡仍然像模式的背景一样，而不仅仅是在另一个组件中呈现模式。

\n

我定制的 TabButton 组件：

\n

import React from \'react\';\nimport {TouchableWithoutFeedback} from \'react-native-gesture-handler\';\nimport Icon from \'react-native-vector-icons/MaterialIcons\';\nimport Button from \'./styles\';\n\nconst TabButton = ({onPress, focused}) => {\n  return (\n    <TouchableWithoutFeedback onPress={onPress}>\n      <Button focused={focused}>\n        <Icon name="add" size={35} color={\'white\'} />\n      </Button>\n    </TouchableWithoutFeedback>\n  );\n};\n\nexport default TabButton;\n\n

\n

\n

我的 tab.routes.js：

\n

import React from \'react\';\nimport {createBottomTabNavigator} from \'@react-navigation/bottom-tabs\';\nimport TabButton from \'../components/Tab/Button\';\nimport Icon from \'react-native-vector-icons/MaterialIcons\';\nimport Home from \'../containers/Home\';\nimport Graphic from \'../containers/Graphic\';\nimport Help from \'../containers/Help\';\nimport NewTransaction from \'../containers/NewTransaction\';\nimport SettingsStack from \'./settings.routes\';\n\nconst icons = {\n  Home: {\n    name: \'home\',\n  },\n  Graphic: {\n    name: \'pie-chart\',\n  },\n  NewTransaction: {\n    name: \'notifications-none\',\n  },\n  Help: {\n    name: \'help-outline\',\n  },\n  Adjustment: {\n    name: \'settings\',\n  },\n};\n\nconst Tab = createBottomTabNavigator();\nconst TabRoutes = () => (\n  <Tab.Navigator\n    initialRouteName="HomeScreen"\n    screenOptions={({route, navigation}) => ({\n      tabBarIcon: ({color, size, focused}) => {\n        if (route.name === \'NewTransaction\') {\n          return <TabButton focused={focused} onPress={() => navigation.navigate(\'NewTransaction\')} />;\n        }\n        const {name} = icons[route.name];\n        return <Icon name={name} size={size} color={color} />;\n      },\n    })}\n    tabBarOptions={{\n      keyboardHidesTabBar: true,\n      activeTintColor: \'#f8b006\',\n      inactiveTintColor: \'#1C3041\',\n      style: {\n        height: 60,\n      },\n      iconStyle: {\n        marginTop: 5,\n      },\n      labelStyle: {\n        fontSize: 12,\n        marginBottom: 10,\n      },\n    }}>\n    <Tab.Screen\n      options={{\n        title: \'Home\',\n      }}\n      name="Home"\n      component={Home}\n    />\n    <Tab.Screen\n      options={{\n        title: \'Gr\xc3\xa1fico\',\n      }}\n      name="Graphic"\n      component={Graphic}\n    />\n    <Tab.Screen\n      options={{\n        title: \'\',\n      }}\n      component={NewTransaction}\n      name="NewTransaction"/>\n    <Tab.Screen\n      options={{\n        title: \'Ajuda\',\n      }}\n      name="Help"\n      component={Help}\n    />\n    <Tab.Screen\n      options={{\n        title: \'Ajustes\',\n      }}\n      name="Adjustment"\n      component={SettingsStack}\n    />\n  </Tab.Navigator>\n);\n\nexport default TabRoutes;\n\n

\n

我的模态组件：

\n

import React from \'react\';\nimport RBSheet from \'react-native-raw-bottom-sheet\';\nimport PropTypes from \'prop-types\';\n\nconst CustomModal = ({children, refRBSheet, borderRadius, height, animationType, onClose, onOpen}) => {\n  return (\n    <RBSheet\n      animationType={animationType}\n      height={height}\n      onClose={onClose}\n      onOpen={onOpen}\n      ref={refRBSheet}\n      closeOnDragDown={true}\n      closeOnPressMask={true}\n      customStyles={{\n        container: {\n          backgroundColor: \'white\',\n          borderTopLeftRadius: borderRadius,\n          borderTopRightRadius: borderRadius,\n        },\n      }}>\n      {children}\n    </RBSheet>\n  );\n};\n\nexport default CustomModal;\n

\n

我的 NewTransaction 组件呈现模式：

\n

import React, {useRef, useEffect} from \'react\';\nimport {Text, View} from \'react-native\';\nimport CustomModal from \'../../components/Modal/\';\nconst NewTransaction = ({isVisible, onClose}) => {\n  const refRBSheet = useRef();\n\n  useEffect(() => {\n    if (isVisible) {\n      refRBSheet.current.open();\n    } else {\n      refRBSheet.current.close();\n    }\n  }, [isVisible]);\n\n  return (\n    <CustomModal refRBSheet={refRBSheet} onClose={onClose}>\n      <View>\n        <Text>Hellow</Text>\n      </View>\n    </CustomModal>\n  );\n};\n\nexport default NewTransaction;\n\n

\n

Answer 1

您需要将其全部包装在 RootNavigator 中，如下所示：

const RootStack = createStackNavigator();

const RootNavigator = () => {
  return (
    <RootStack.Navigator screenOptions={{ headerShown: false, presentation: 'modal', animationEnabled: false }}>
      <RootStack.Screen name="BottomTabNavigatorScreen" component={TabRoutes}/>
      <RootStack.Screen name="CustomModal" component={CustomModal} options={{ animationEnabled: true }}/>
    </RootStack.Navigator>
  )
}

export default () => {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
};

然后，您可以在按钮上添加一个tabPress侦听器以导航到模式和placeholder组件字段中的必填项：

const placeholder = () => <View />


<Tab.Screen name="NewTransaction" component={placeholder}
    listeners={({ navigation }) => ({
       tabPress: (e) => {
          e.preventDefault();
          navigation.navigate('CustomModal');
       }
    })>
</Tab.Screen>

Answer 2

首先，创建一个返回 null 的新页面/屏幕，以便当您启动模式时它不会显示任何背景。\n像这样

\n

const MyModalBackgroundScreen = () => {\n  return null;\n};\n

\n

之后在选项卡导航器中创建选项卡

\n

import React from 'react';\nimport {createBottomTabNavigator} from '@react-navigation/bottom-tabs';\nimport TabButton from '../components/Tab/Button';\nimport Icon from 'react-native-vector-icons/MaterialIcons';\nimport Home from '../containers/Home';\nimport Graphic from '../containers/Graphic';\nimport Help from '../containers/Help';\nimport NewTransaction from '../containers/NewTransaction';\nimport SettingsStack from './settings.routes';\n\nconst icons = {\n  Home: {\n    name: 'home',\n  },\n  Graphic: {\n    name: 'pie-chart',\n  },\n  NewTransaction: {\n    name: 'notifications-none',\n  },\n  Help: {\n    name: 'help-outline',\n  },\n  Adjustment: {\n    name: 'settings',\n  },\n};\n\nconst Tab = createBottomTabNavigator();\nconst TabRoutes = () => (\n  <Tab.Navigator\n    initialRouteName="HomeScreen"\n    screenOptions={({route, navigation}) => ({\n      tabBarIcon: ({color, size, focused}) => {\n        //removd that if condition \n        const {name} = icons[route.name];\n        return <Icon name={name} size={size} color={color} />;\n      },\n    })}\n    tabBarOptions={{\n      keyboardHidesTabBar: true,\n      activeTintColor: '#f8b006',\n      inactiveTintColor: '#1C3041',\n      style: {\n        height: 60,\n      },\n      iconStyle: {\n        marginTop: 5,\n      },\n      labelStyle: {\n        fontSize: 12,\n        marginBottom: 10,\n      },\n    }}>\n    <Tab.Screen\n      options={{\n        title: 'Home',\n      }}\n      name="Home"\n      component={Home}\n    />\n    <Tab.Screen\n      options={{\n        title: 'Gr\xc3\xa1fico',\n      }}\n      name="Graphic"\n      component={Graphic}\n    />\n    <Tab.Screen\n      name="Graphic"\n      component={MyModalBackgroundScreen} //first import this in this \n      options={{\n        tabBarLabel: ({}) => {\n          return null; //no label will be displayed\n        },\n        tabBarButton: () => {\n          return <CustomModal refRBSheet={refRBSheet} onClose={onClose}>; // call your modal here directly.\n        },\n      }}\n    />\n    <Tab.Screen\n      options={{\n        title: '',\n      }}\n      component={NewTransaction}\n      name="NewTransaction"/>\n    <Tab.Screen\n      options={{\n        title: 'Ajuda',\n      }}\n      name="Help"\n      component={Help}\n    />\n    <Tab.Screen\n      options={{\n        title: 'Ajustes',\n      }}\n      name="Adjustment"\n      component={SettingsStack}\n    />\n  </Tab.Navigator>\n);\n\nexport default TabRoutes;\n

\n