如何解决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 举报,一经查实,本站将立刻删除。