React导航无法在Dissmis模式路线或滚动事件之间进行猜测

问题描述

我的堆栈导航中有一条模态路由，这是一个共享元素转换堆栈。 我想取消模式路线并返回，而不是ScrollView捕获我的否定滚动事件。

我似乎无法找出正确的方法。

ModalRoute

import React from "react";
import { Linking,Animated,BackHandler,View } from "react-native";
import styles from "./ProfileViewStyles";
import { Images,Colors } from "App/Theme";
import { isIos } from "App/Theme/Metrics";
import { useSelector,usedispatch } from "react-redux";
import NavActions from "../../Stores/Navigation/Actions";
import { NavigationEvents } from "react-navigation";
import { adUrl } from "../../utils/mockData";

import * as Animatable from "react-native-animatable";
import { SharedElement } from "react-navigation-shared-element";
import { ModalContent,ButtonMatch } from "../../Components/Matches";
import { BackChevron } from "../../Components/shared";
import Fastimage from "react-native-fast-image";

const ProfileView = ({ navigation }) => {
  React.useEffect(() => {
    if (!isIos) {
      BackHandler.addEventListener("hardwareBackPress",handelAndroidAnimation);
    }
    return () => {
      handleBlur();
      if (!isIos) {
        BackHandler.removeEventListener(
          "hardwareBackPress",handelAndroidAnimation
        );
      }
    };
  },[]);
  const [modalTop,setmodalTop] = React.useState(false);
  const [scrollTop,setScrollTop] = React.useState(false);
  const { matchInfo,pic } = navigation?.state?.params;
  const theme = useSelector((state) => state.settings.theme);
  const dispatch = usedispatch();
  const scrollOffset = React.useRef(new Animated.Value(0)).current;
  const scale = React.useRef(new Animated.Value(1)).current;
  const matchImgRef = React.useRef();
  const modalRef = React.useRef();
  const buttonsRef = React.useRef();
  const backChevronRef = React.useRef();
  const scrollEvent = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollOffset } } }],{
      listener: (event) => {
        let offsetY = Math.round(event.nativeEvent.contentOffset.y);
        setScrollTop(offsetY <= 0);
        if (offsetY >= 160) {
          setmodalTop(true);
        }
        if (offsetY <= 120) {
          setmodalTop(false);
        }
      },useNativeDriver: true,}
  );

  function handleBlur() {
    dispatch(NavActions.hideProfileView());
    navigation.goBack();
  }
  function handelAndroidAnimation() {
    buttonsRef?.current?.slideOutDown(400);
    backChevronRef?.current?.fadeOut(400);
    modalRef?.current?.slideOutDown(400);
    matchImgRef?.current?.slideOutDown(400);
    dispatch(NavActions.hideProfileView());
    setTimeout(() => {
      navigation.goBack();
    },400);

    return true;
  }
  return (
    <React.Fragment>
      {!isIos && !modalTop && (
        <Animatable.View
          ref={backChevronRef}
          useNativeDriver
          duration={1000}
          animation={"fadeIn"}
          style={styles.androidBackChevron}
        >
          <BackChevron goBack={handelAndroidAnimation} />
        </Animatable.View>
      )}
      {isIos ? (
        <Animated.View
          style={{
            transform: [
              {
                translateY: scrollOffset.interpolate({
                  inputRange: [-1,1],outputRange: [1,-0.5],}),},{
                scale,],}}
        >
          <SharedElement style={{ position: "absolute" }} id={"image"}>
            <Fastimage
              resizeMode={Fastimage.resizeMode.cover}
              style={styles.matchImg}
              source={{ uri: pic,priority: Fastimage.priority.high }}
            />
          </SharedElement>
        </Animated.View>
      ) : (
        <Animated.View
          style={{
            transform: [
              {
                translateY: scrollOffset.interpolate({
                  inputRange: [-1,}}
        >
          <Animatable.View
            ref={matchImgRef}
            animation={"slideInUp"}
            duration={400}
            useNativeDriver
            style={{ position: "absolute" }}
          >
            <Fastimage
              resizeMode={Fastimage.resizeMode.cover}
              style={styles.matchImg}
              source={{ uri: pic,priority: Fastimage.priority.high }}
            />
          </Animatable.View>
        </Animated.View>
      )}

      <NavigationEvents
        onWillFocus={() => dispatch(NavActions.setProfileView())}
      />
      <Animated.ScrollView
        showsverticalScrollIndicator={false}
        contentContainerStyle={styles.animscrollViewContainer}
        onScroll={scrollEvent}
      >
        <Animatable.View
          ref={modalRef}
          duration={isIos ? 430 : 400}
          useNativeDriver
          animation={"slideInUp"}
          style={styles.contentWrap}
        >
          <ModalContent
            goBack={isIos ? handleBlur : handelAndroidAnimation}
            isModalTop={modalTop}
            matchName={matchInfo.matchName}
            matchAge={matchInfo.matchAge}
            description={matchInfo.description}
            interests={matchInfo.interests}
            aboutme={matchInfo.aboutme}
            pics={matchInfo.pics}
            ad={Images.ad}
            onAdPress={() => Linking.openURL(adUrl)}
            theme={theme}
          />
        </Animatable.View>
      </Animated.ScrollView>

      <Animatable.View
        delay={500}
        ref={buttonsRef}
        animation={"bounceIn"}
        useNativeDriver
        style={styles.buttonsWrap}
        id={pic}
      >
        <ButtonMatch
          color={Colors.lightGray}
          icon={Images.declineIcon}
          smIcon
          onPress={isIos ? handleBlur : handelAndroidAnimation}
        />
        <ButtonMatch
          color={Colors.greenSuperLike}
          icon={Images.envelopeIcon}
          onPress={isIos ? handleBlur : handelAndroidAnimation}
        />
        <ButtonMatch
          color={Colors.pinklove}
          icon={Images.loveIcon}
          onPress={isIos ? handleBlur : handelAndroidAnimation}
        />
      </Animatable.View>
    </React.Fragment>
  );
};

if (isIos) {
  ProfileView.sharedElements = (navigation) => [
    {
      id: "image",];
}

export default ProfileView;

和堆栈导航器配置

const MatchStack = createSharedElementStackNavigator(
  {
    MatchScreen: MatchesScreen,ProfileViewScreen: ProfileViewScreen,{
    headerMode: "none",mode: "modal",initialRouteName: "MatchScreen",defaultNavigationoptions: {
      animationEnabled: isIos,gestureDirection: "vertical",gestureEnabled: isIos,gestureResponsedistance: {
        vertical: SCREEN_HEIGHT,transitionSpec: {
        open: isIos ? openIos : openAndroid,close: {
          animation: "timing",config: { duration: isIos ? null : -1,useNativeDriver: true },cardStyle: { backgroundColor: "transparent" },}
);

问题在于，有时它会确定其为关闭导航事件，有时甚至是其否定滚动事件。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）