React本地手勢處理程式 -有解無憂

我是React native影片的新手。我正在嘗試創建自定義底層表。我已經做了兩個影片功能。這些函式將觸發變換translateY的位置變化。我已經創建了兩個分離的按鈕并呼叫這些函式。當按鈕按下時，目標影片視圖會向上和向下移動。我想讓它們可拖動地滾動。如果影片視圖拖到頂部，視圖將向上移動，如果影片視圖拖到底部，視圖將向上移動。對于這個手勢運動，我使用了PanGestureHandler，來自react-native-gesture-handler。我在gesture-handler函式中使用了bad-logic，并使用這些函式，當它拖到底部時，它就會下降，但當我試圖拖到上面時，它卻不會上升。我真的不知道該如何解決這個問題。

我在expo-snack中分享了我的代碼

。

這是我所有的代碼

import React, { useState } from "react"。
    import {
      StyleSheet,
      Text,
      視圖。
      Dimensions,
      useWindowDimensions。
      SafeAreaView。
      Animated。
      Button,
    } from "react-native"。
    
    import MapView from "react-native-map" ;
    
    import {
      PanGestureHandler,
      PanGestureHandlerGestureEvent,
      TouchableOpacity,
    } from "react-native-gesture-handler" ;
    
    型別 AnimatedGHContext = {
      startX: number;
      startY: number;
    };
    
    const { width } = Dimensions.get("screen") 。
    
    const initialRegion = {
      latitudeDelta: 15,
      longitudeDelta: 15,
      latitude: 60.1098678,
      經度: 24.7385084,
    };
    
    export default function App（）{
      const { height } = useWindowDimensions（）。
      const [translateY] = useState(new Animated. Value(0))。
    
      const bringUpActionSheet = (/span>) => {
        Animated.timing（translateY, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true。
        }）.start（）。
      };
    
      const closeDownBottomSheet = (/span>) => {
        Animated.timing（translateY, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true。
        }）.start（）。
      };
    
      const bottomSheetIntropolate = translateY.interpolate({
        inputRange: [0, 1] 。
        outputRange: [-height / 2.4   50, 0]。
      });
    
      const animatedStyle = {
        transform: [
          {
            translateY: bottomSheetIntropolate,
          },
        ],
      };
    
      const gestureHandler=（e）=> {
        console.log(e.nativeEvent.state); / This is NOT GOOD CONDITION 
        if (e.nativeEvent.state) {
          closeDownBottomSheet（）。
        } else if (e.nativeEvent.state < 4) {
          bringUpActionSheet（）。
        }
      };
    
      return (
        <View style={{ flex。  1 }}>
          <MapView style={styles. mapStyle} initialRegion={initialRegion} />
          <PanGestureHandler onGestureEvent={gestureHandler}>/span>
            <Animated.View。
              style={[style. container, { top: height * 0.7 }, animatedStyle] }。
            >
              <Animated.View style={styles.grbber} /> 
              <SafeAreaView style={styles.wrapper}> 
                <View style={styles.content}>/span>
                  <Text style={styles. title}>我是滾動表</Text>
                  <TouchableOpacity
                    style={styles.button}。
                    onPress={() => closeDownBottomSheet()}。
                  >
                    <Text style={styles. title}>Close</Text>
                  </TouchableOpacity>/span>
                  <TouchableOpacity
                    style={styles.button}。
                    onPress={() => bringUpActionSheet()}。
                  >
                    <Text style={styles. title}>Up</Text>/span>
                  </TouchableOpacity>/span>
                  <View style={styles.fakeContent} />
                </View>
              </SafeAreaView>/span>
            </Animated.View>/span>
          </PanGestureHandler>/span>
        </View>
      );
    }
    
    const styles = StyleSheet.create（{
      container: {
        position: "absolute",
        top: 0,
        left: 0,
        右: 0,
        backgroundColor: "white",
        陰影顏色。"black",
        shadowOffset: {
          height: -6,
          width: 0,
        },
        shadowOpacity: 0.1,
        shadowRadius: 5,
        borderTopEndRadius: 15,
        borderTopLeftRadius: 15,
      },
      mapStyle: {
        width: width,
        高度: 800,
      },
      content: {
        flex: 1,
        padding: 20,
      },
      title: {
        fontWeight: "400"/span>,
        fontSize: 22,
      },
      fakeContent: {
        flex: 1,
        height: 1000,
      },
      grbber: {
        width: 60,
        alignSelf: "center",
        marginTop: 5,
        borderTopWidth: 5,
        borderTopColor: "#aaa",
      },
      button: {
        alignItems: "center",
        justifyContent: "center",
        paddingVertical: 12,
        paddingHorizontal: 32,
        borderRadius: 4,
        levation: 3,
        backgroundColor: "green",
        marginBottom: 10,
        height: 50,
      },
    });

uj5u.com熱心網友回復：

import React, { useState } from 'react';
輸入 {
  StyleSheet,
  文本。
  視圖。
  尺寸。
  useWindowDimensions,
  SafeAreaView,
  影片。
  泛應答。
  按鈕。
}來自'react-native'。

從'react-native-maps'匯入MapView。

輸入 {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
  TouchableOpacity。
} from 'react-native-gesture-handler';

型別 AnimatedGHContext = {
  startX: number,
  startY: number,
};

const { width } = Dimensions.get('screen');

const initialRegion = {
  latitudeDelta: 15,
  經度Delta: 15,
  緯度：60.1098678。
  經度：24.7385084。
};

出口默認函式 App() {
  常數 { 高度 } = useWindowDimensions();
  const [translateY] = useState(new Animated.Value(0));

  const bringUpActionSheet = () => {
    Animated.timing(translateY, {
      toValue: 0,
      持續時間。500,
      useNativeDriver: true,
    }）.開始（）。
  };

  const closeDownBottomSheet = () => {
    Animated.timing(translateY, {
      toValue: 1,
      持續時間。500,
      useNativeDriver: true,
    }）.開始（）。
  };

  const bottomSheetIntropolate = translateY.interpolate({
    inputRange: [0, 1],
    outputRange: [-height / 2.4   50, 0],
  });

  const animatedStyle = {
    轉換。[
      {
        translateY: bottomSheetIntropolate,
      },
    ],
  };
  [];

  const pan = React.useRef(new Animated.ValueXY()).current;
  const panResponder = React.useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: () => {
        /當用戶放開視圖時，在這里添加任何你想要的功能
      },
    })
  ).當前。

  回傳 (
    <View style={{ flex: 1 }}>
      <MapView style={styles.mapStyle} initialRegion={initialRegion} />
      <Animated.View
        style={[style.container, { top: height * 0.7 }, animatedStyle]}。
        {...panResponder.panHandlers}>
        <Animated.View
          style={[
            {
              變換。[{ translateX: pan.x }, { translateY: pan.y }],
            },
            styles.grbber,
          ]}
          {...panResponder.panHandlers}.
        />
        <SafeAreaView style={styles.wrapper}>
          <View style={styles.content}>
            <Text style={styles.title}>I am scroll sheet</Text>
            <TouchableOpacity
              style={styles.button}}
              onPress={() => closeDownBottomSheet()}>
              <Text style={styles.title}> Close</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}}
              onPress={() => bringUpActionSheet()}>
              <Text style={styles.title}>Up</Text>
            </TouchableOpacity>
            <視圖 style={styles.fakeContent};向上</Text> </TouchableOpacity> />
          </View>
        </SafeAreaView>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  容器。{
    position: 'absolute',
    top: 0,
    left: 0,
    右：0。
    backgroundColor: 'white',
    陰影顏色：'黑色'。
    shadowOffset: {
      高度：-6。
      寬度：0。
    },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    borderTopEndRadius: 15,
    borderTopLeftRadius: 15,
  },
  mapStyle: {
    寬度：寬度。
    高度: 800,
  },
  內容。{
    flex: 1,
    padding: 20,
  },
  標題。{
    fontWeight: '400',
    字體大小: 22,
  },
  fakeContent: {
    flex: 1,
    高度：1000。
  },
  grbber: {
    flex: 1,
    寬度: 60,
    alignSelf: 'center',
    marginTop: 5,
    borderTopWidth: 5,
    borderTopColor: '#aaa',
  },
  按鈕。{
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    仰角。3,
    backgroundColor: 'green',
    marginBottom。10,
    高度：50。
  },
});

uj5u.com熱心網友回復：

我做了這個邏輯。它作業得很完美 :)

。

 const gestureHandler = (e: PanGestureHandlerGestureEvent) => {
    if (e.nativeEvent.translationY > 0) {
      closeDownBottomSheet（）。
    } else if (e.nativeEvent.translationY< 0) {
      bringUpActionSheet（）。
    
  };

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319377.html

標籤：

上一篇：如何在谷歌應用腳本宏中參考作業表的名稱？

下一篇：重繪頁面后，漢堡包切換器的影片不能立即作業