如何在 React Navigation 的选项卡屏幕中渲染模态框

Question

当用户按下中间按钮时，我需要渲染一个模式。我正在使用react-native-raw-bottom-sheet库为我的应用程序提供模态。\n我尝试isFocused={props.navigation.isFocused} 在 <Tab.Screen> 内传递一个道具，但问题是当我将道具传递给基于是否集中于呈现的两个时次而不是一次。

\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\';\n\nimport Home from \'../containers/Home\';\nimport Adjustment from \'../containers/Adjustment\';\nimport Graphic from \'../containers/Graphic\';\nimport Help from \'../containers/Help\';\nimport NewTransaction from \'../containers/NewTransaction\';\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();\n\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      name="NewTransaction"\n      component={NewTransaction}\n    />\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      {(props) => (\n        <Adjustment isVisible={props.navigation.isFocused()} onPress={() => props.navigation.navigate(\'Home\')} />\n      )}\n    </Tab.Screen>\n  </Tab.Navigator>\n);\n\nexport default TabRoutes;\n\n

\n

选项卡/按钮/index.js

\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

import React from \'react\';\nimport {Text, View} from \'react-native\';\nconst NewTransaction = ({isVisible}) => {\n  return (\n    <View>\n      <Text>Welcome to NewTransactions </Text>\n    </View>\n  );\n};\n\nexport default NewTransaction;\n\n

\n

Answer 1

这是我的主页选项卡，在您看来是这样的

\n

\n

我使用代码自定义选项卡栏，但添加按钮不是屏幕，它只是一个按钮和可供选择的弹出选项

\n

\n

import {hideModalCreate, showModalCreate} from \'@features/loading/actions\';\nimport CreateYCTV from \'@features/main/CreateYCTV\';\nimport HomeScreen from \'@features/main/Home\';\nimport Manager from \'@features/main/Manager\';\nimport Notification from \'@features/main/Notification\';\nimport {createBottomTabNavigator} from \'@react-navigation/bottom-tabs\';\nimport images from \'@res/icons\';\nimport * as React from \'react\';\nimport {Image, Pressable, View} from \'react-native\';\nimport {Text, useTheme} from \'react-native-paper\';\nimport {useSafeAreaInsets} from \'react-native-safe-area-context\';\nimport {connect} from \'react-redux\';\nimport ProductStack from \'./ProductStack\';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabBar({\n  state,\n  descriptors,\n  navigation,\n  showModalCreate,\n  hideModalCreate,\n  isShowModalCreate,\n}) {\n  const {colors} = useTheme();\n  const insets = useSafeAreaInsets();\n\n  const focusedOptions = descriptors[state.routes[state.index].key].options;\n\n  if (focusedOptions.tabBarVisible === false) {\n    return null;\n  }\n\n  return (\n    <View\n      style={{\n        flexDirection: \'row\',\n        backgroundColor: \'#FFFFFF\',\n        paddingBottom: Math.max(insets.bottom, 0),\n      }}>\n      {state.routes.map((route, index) => {\n        const {options} = descriptors[route.key];\n        const label =\n          options.tabBarLabel !== undefined\n            ? options.tabBarLabel\n            : options.title !== undefined\n            ? options.title\n            : route.name;\n\n        const isFocused = state.index === index;\n\n        const getSourceImage = (isFocused) => {\n          switch (route.name) {\n            case \'home\':\n              return isFocused ? images.tab_home1 : images.tab_home;\n            case \'loans\':\n              return isFocused ? images.tab_searching1 : images.tab_searching;\n            case \'notification\':\n              return isFocused ? images.notifications1 : images.notifications;\n            case \'manager\':\n              return isFocused\n                ? images.tab_paper_folder1\n                : images.tab_paper_folder;\n            default:\n              return images.tab_add;\n          }\n        };\n\n        const onPress = () => {\n          if (route.name === \'create\') {\n            if (isShowModalCreate) {\n              hideModalCreate();\n              return;\n            }\n            showModalCreate();\n            return;\n          }\n          hideModalCreate();\n          const event = navigation.emit({\n            type: \'tabPress\',\n            target: route.key,\n            canPreventDefault: true,\n          });\n\n          if (!isFocused && !event.defaultPrevented) {\n            navigation.navigate(route.name);\n          }\n        };\n\n        const onLongPress = () => {\n          navigation.emit({\n            type: \'tabLongPress\',\n            target: route.key,\n          });\n        };\n\n        return (\n          <Pressable\n            accessibilityRole="button"\n            accessibilityStates={isFocused ? [\'selected\'] : []}\n            accessibilityLabel={options.tabBarAccessibilityLabel}\n            testID={options.tabBarTestID}\n            onPress={onPress}\n            onLongPress={onLongPress}\n            style={{\n              flex: 1,\n              alignItems: \'center\',\n              justifyContent: \'center\',\n              paddingVertical: 8,\n              backgroundColor: \'white\',\n            }}>\n            <Image source={getSourceImage(isFocused)} />\n            {route.name != \'create\' ? (\n              <Text\n                style={{\n                  color: isFocused ? colors.primary : colors.placeholder,\n                  fontSize: 10,\n                  marginTop: 4,\n                }}>\n                {label}\n              </Text>\n            ) : null}\n          </Pressable>\n        );\n      })}\n    </View>\n  );\n}\n\nconst Tabbar = ({showModalCreate, hideModalCreate, isShowModalCreate}) => {\n  return (\n    <Tab.Navigator\n      tabBar={(props) => (\n        <MyTabBar\n          isShowModalCreate={isShowModalCreate}\n          showModalCreate={showModalCreate}\n          {...props}\n          hideModalCreate={hideModalCreate}\n        />\n      )}>\n      <Tab.Screen\n        name="home"\n        component={HomeScreen}\n        options={{\n          title: \'Trang ch\xe1\xbb\xa7\',\n        }}\n      />\n      <Tab.Screen\n        name="loans"\n        component={ProductStack}\n        options={{\n          title: \'S\xe1\xba\xa3n ph\xe1\xba\xa9m\',\n        }}\n      />\n      <Tab.Screen name="create" component={CreateYCTV} />\n      <Tab.Screen\n        name="notification"\n        component={Notification}\n        options={{\n          title: \'Th\xc3\xb4ng b\xc3\xa1o\',\n          tabBarBadge: \'13\',\n        }}\n      />\n      <Tab.Screen\n        name="manager"\n        component={Manager}\n        options={{\n          title: \'Qu\xe1\xba\xa3n l\xc3\xbd\',\n        }}\n      />\n    </Tab.Navigator>\n  );\n};\n\nconst mapStateToProps = (state, ownProps) => {\n  return {\n    isShowModalCreate: state.loading.isShowModalCreate,\n  };\n};\n\nconst mapDispatch = {\n  showModalCreate: showModalCreate,\n  hideModalCreate: hideModalCreate,\n};\n\nexport default connect(mapStateToProps, mapDispatch)(Tabbar);\n\n

\n