0

我想从下到上滑动一个盒子。我曾经diffClamp限制滑块的距离。我尝试了很多方法来做到这一点,但找不到解决方案。

在下面的代码片段中,我能够从上到下滑动。在那我也发现了一个问题。另外,当我第二次尝试滑动时,它会从头开始滑动,而不是从当前位置开始滑动。请给我一个解决这两个问题的方法。

零食代码示例

const SLIDER_HEIGHT = 300
export default () => {
    const state = new Value(State.UNDETERMINED);
    const translationY = new Value(0);

    const _onPanGestureEvent = Animated.event(
        [{ nativeEvent: { translationY: translationY, state } }],
        { useNativeDriver: true },
    );

    const translateY = diffClamp(
        translationY,
        0,
        SLIDER_HEIGHT,
    );
    return (
        <View style={styles.container}>
            <PanGestureHandler
                onGestureEvent={_onPanGestureEvent}
                onHandlerStateChange={_onPanGestureEvent}
            >
                <Animated.View
                    style={{
                        transform: [{ translateY }],
                        width: 50,
                        height: 50,
                        backgroundColor: 'red',
                    }}
                >
                    <Text>A</Text>
                </Animated.View>
            </PanGestureHandler>
        </View>
    );
};
4

1 回答 1

1

您必须制作自定义组件。这是使用可拖动视图和进度条的示例,您可以实现这一点

示例代码:----

 /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */

    import React,{Component} from 'react';
    import {
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Text,
      StatusBar,
      TouchableOpacity,
      Animated
    } from 'react-native';

    import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
    import Icon from 'react-native-vector-icons/FontAwesome';
    import SplashScreen from 'react-native-splash-screen';
    import firebase from 'react-native-firebase';
    import { SwipeListView } from 'react-native-swipe-list-view';
    import { Pages } from 'react-native-pages';

    import Swipeable from 'react-native-gesture-handler/Swipeable';

    // import SQLite from 'react-native-sqlite-storage';
    import SQLite from "react-native-sqlite-storage";
    import RadialGradient from 'react-native-radial-gradient';
    import YouTube, { YouTubeStandaloneAndroid } from 'react-native-youtube';

    import * as Progress from 'react-native-progress';
    import Draggable from 'react-native-draggable';

    // SQLite.enablePromise(true);
    // const db = SQLite.openDatabase

    const successcb = (response) => {
      console.log('>>>>>>>>>>>>>>>>>>>:::::::'+ JSON.stringify(response))
    }

    const errorcb = (response) => {
    console.log('<<<<<<<<<<<<<<<<<<<<<<'+response.openError)
    }
    var db = SQLite.openDatabase({name: 'DailyDigitalPlanner.db', location : 'default'}, successcb, errorcb);
    // Initialize Firebase
    // const Firebase = firebase.initializeApp(firebaseConfig)

    export default class App extends Component<Props> {
      constructor(props) {
        super(props);
        this.state = {
          email: 'pramodk@xyz.com', // init opacity 0
          password: 'temp123',
          listViewData: [
                'asdasd',
                'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                'First Item',


            ],
          progressLevel: 50/200,
          initialMarkerY: 140

        };
      }

       componentDidMount() {
          // do stuff while splash screen is shown
            // After having done stuff (such as async tasks) hide the splash screen
            SplashScreen.hide();

            // const currentUser = firebase.auth();
            // console.log(currentUser)
           // this.getPlans();
           // var db = SQLite.openDatabase({name: 'DailyDigitalPlanner.db', location: 'default'});
        }



        getPlans(){
          // console.log('>>>>>>>>>>>>>>>>>>>>>>>>>');
          // db.enablePromise(true)
          // var create'CREATE TABLE IF NOT EXISTS Product (prodId, prodName, prodDesc, prodImage, prodPrice)'
          var createTable = "CREATE TABLE IF NOT EXISTS plans (user_id INTEGER , Title TEXT NOT NULL );"
          var insertRow = "INSERT INTO plans (user_id, Title) values(15,'Morning Breakfast')"

          db.transaction(function (txn) {
            console.log('>>>>>>>>>>>>>>>>>>>>>>>>>')
            txn.executeSql("select * from plans", [], (tx, results) => {

                console.log('results+++++++++', results.rows.item(1));
                // console.log('tx+++++++++', tx);
               db.close();
            },(error)=>{
              console.log('error+++++++++', error);
            });
        })


      }




        handleSignUp(){
            const { email, password } = this.state
            Firebase.auth()
                .createUserWithEmailAndPassword(email, password)
                .then(() => console.log('success'))
                .catch(error => console.log(error))
        }

        handleUpdateUserData(){
          const currentUser = firebase.auth().currentUser;
          console.log(currentUser);
            if (currentUser) {
               currentUser.updateProfile({
                displayName: 'Promo',
                firstName: 'Pramod'
              })
              .then(()=>{
                const currentUser = firebase.auth().currentUser;
                console.log('Success==='+ JSON.stringify(currentUser));
              })
              .catch(function(error) {
              // An error happened.
              console.log(error)
            });
          }

        }

        handleLogin(){
          firebase.auth()
            .signInWithEmailAndPassword('pramodk@xyz.com', 'temp123')
            .then((e) => console.log('successful login :::'+JSON.stringify(e)))
            .catch((error) => console.log('successful login :::'+error))

            const currentUser = firebase.auth();
            console.log(currentUser)
        }

        handleSignout(){
          firebase.auth().signOut().then(function() {
      // Sign-out successful.
            })
            .then(()=>{console.log('Logout succesfully')})
            .catch(function(error) {
              // An error happened.
            });
        }

        handleCreateNode(){
          var config = {
              databaseURL: "https://habbit-a12fd.firebaseio.com",
              projectId: "habbit-a12fd",
          };

          // firebase.initializeApp(config);
            const user = firebase.auth().currentUser;
            // console.log(currentUser.email);
              firebase.database().ref('Users/'+user.uid+'/userData').set({
                  email: 'pramodk@xyz',
                  firstName:'pramod k',
                  lastName:'kumar',
                  // userId: currentUser.uid

              }).then((data)=>{
                  //success callback
                  console.log('data ' , data)
              }).catch((error)=>{
                  //error callback
                  console.log('error ' , error)
              })



          // const currentUser = firebase.auth();
          // // console.log(currentUser)
          // const mDatabase = firebase.database();
          // mDatabase.child("numbers").push().setValue(1);


        }

        renderLeftActions(progress, dragX){
        const trans = dragX.interpolate({
          inputRange: [0, 50, 100, 101],
          outputRange: [-20, 0, 0, 1],
        });
        return (
          <TouchableOpacity style={{height:50, backgroundColor:'yellow'}} >
            <Animated.Text
              style={[
                styles.actionText,
                {
                  transform: [{ translateX: trans }],
                },
              ]}>
              Archive
            </Animated.Text>
          </TouchableOpacity>
        );
      };

      playBack(){
        console.log(">>>")
        YouTubeStandaloneAndroid.playVideo({
          apiKey: 'AIzaSyBmmEUqceTPDvWW7395zzTiVC_XbJVi7cU', // Your YouTube Developer API Key
          videoId: 'KVZ-P-ZI6W4', // YouTube video ID
          autoplay: true, // Autoplay the video
          startTime: 120, // Starting point of video (in seconds)
          fullscreen: false, 
        })
          .then(() => console.log('Standalone Player Exited'))
          .catch(errorMessage => console.error(errorMessage))
      }

      onDragg(e){
        var percentage = 0;
        var markerY = 0;
        console.log(e)
        if (e.pageY > 200) {
          console.log('i am greater then 200')
          markerY = 150;
          percentage = 0;
        }else if (e.pageY < 0) {
          console.log('i am less then 0')
           markerY = 0;
           percentage = 1;
        }else{
          console.log('i am in between then 0 and 200')
          markerY = e.pageY;
         percentage = (200-e.pageY) / 200
        }

        console.log('>>>'+e.pageY)
        this.setState({

          progressLevel: percentage,
          initialMarkerY:markerY
        })
      }


      render() {
          return (

            <View style={{ flex: 1, backgroundColor: 'white', alignItems:'center' }}>
              <View style={{backgroundColor:'transparent', height:200, justifyContent:'center', alignItems:'center'}} onLayout={({nativeEvent}) => {console.log(nativeEvent) }} >
                <Progress.Bar progress={this.state.progressLevel} width={200} height={50} style={{ transform: [{ rotate: '-90deg', backgroundColor:'green' }] }} />

              <Draggable x={10} y={this.state.initialMarkerY} renderSize={50} maxX={75} minX={75} maxY={200} minY={0} renderColor='grey' renderText={Math.round(this.state.progressLevel.toFixed(2)*100)} isCircle onRelease={({nativeEvent})=>{this.onDragg(nativeEvent)}} />

              <Draggable x={75} y={150} renderSize={50} maxX={75} minX={75} maxY={200} minY={0} renderColor='transparent' renderText='A' onRelease={({nativeEvent})=>{this.onDragg(nativeEvent)}} /> 
              </View>

              <Text style={{marginTop:20}}>Drag the A character to increase the bar status</Text>


            </View>


        );
      }
    }

    const styles = StyleSheet.create({
      leftAction: {
          flex: 1,
          backgroundColor: 'cyan',
          justifyContent: 'center',
        },
        actionText: {
          color: 'black',
          fontSize: 16,
        },
        rectButton: {
            width:'100%',
            height: 80,
            backgroundColor: 'blue',
          },
    });

在此处输入图像描述

于 2020-04-13T10:20:47.383 回答