react-native - 在特定路线上按下时使标签导航按钮触发功能

Question

目标：当已经在特定路线上时，使用选项卡导航器触发功能。

我有三个选项卡：Inbox、Camera和Channel

现在，当我在Camera路线上时，我想handlePhoto使用导航器Circle组件触发我的功能。

我不知道如何传达我正在Camera前往选项卡导航器的路线这一事实。

任何想法我怎么能做到这一点？

export default function MyTabBar({ state, descriptors, navigation }) {
  const cameraRef = createRef();

  const handlePhoto = async () => {
    if (cameraRef.current) {
      let photo = await cameraRef.current.takePictureAsync({
        autoFocus: false,
        forceUpOrientation: false,
        quality: 0,
      });

      navigation.navigate("Confirm", {
        otherParams: photo,
      });
    }
  };
  return (
    <View
      style={{
        flexDirection: "row",
        backgroundColor: "transparent",
        height: 120,
        position: "absolute",
        left: 0,
        right: 0,
        bottom: 0,
        elevation: 0,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: "tabLongPress",
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ["selected"] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, alignItems: "center" }}
          >
            {label === "Inbox" && (
              <IconContainer>
                <NotificationIcon />
                <IconText>Inbox</IconText>
              </IconContainer>
            )}
            {label === "Camera" && (
              <>
                {isFocused ? (
                  <Circle
                    handlePhoto={handlePhoto}
                    style={{
                      height: 75,
                      width: 75,
                      borderWidth: 7,
                      marginBottom: 80,
                    }}
                  />
                ) : (
                  <Circle
                    handlePhoto={handlePhoto}
                    style={{ height: 50, width: 50 }}
                  />
                )}
              </>
            )}

            {label === "Channels" && (
              <IconContainer>
                <ChatIcon />
                <IconText>Channels</IconText>
              </IconContainer>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

标签： react-native