如何将拖动视图绑定到ScrollView项目中？

2024-02-05

我创造了ScrollView具有三视图。我想将拖动的视图绑定到ScrollView，其余没有拖放的视图应该保持在外面ScrollView。怎么可能。

请参阅 GIF：我想在 ScrollView 中添加draggableView。

Code :

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PanResponder,
  Animated,
  Easing,
  Dimensions,
  Platform,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import Carousel from 'react-native-snap-carousel';


let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  constructor(props){
    super(props);

    this.dataDrag      =  [1,2,3,4],
    this.pan = this.dataDrag.map( () => new Animated.ValueXY() );

    this.state = {
        showDraggable   : true,
        dropZoneValues  : null,
        entries : ['Apple1' , 'Apple2', 'Apple3']
    };
}

getPanResponder(index) {
    return PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove              : Animated.event([null,{
            dx  : this.pan[index].x,
            dy  : this.pan[index].y
        }]),
        onPanResponderRelease           : (e, gesture) => {
            if(this.isDropZone(gesture)){
                this.setState({
                    showDraggable : false
                });
            }else{
                Animated.spring(
                    this.pan[index],
                    {toValue:{x:0,y:0}}
                ).start();
            }
        }
    });
}

isDropZone(gesture){
    var dz = this.state.dropZoneValues;
    return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
}

setDropZoneValues(event){
  console.log('event.nativeEvent.layout', event.nativeEvent.layout);
    this.setState({
        dropZoneValues : event.nativeEvent.layout
    });
}

_renderItem ({item, index}) {
    return (
        <View style={{width: Dimensions.get('window').width - 100 , height : 150 , backgroundColor : 'red' , marginLeft : 50 , marginRight : 50}}>
            <Text style={{color : 'black' , marginTop : 20}}>{item}</Text>
        </View>
    );
}

render(){
    return (
        <View style={styles.mainContainer}>

            <ScrollView>
              <View onLayout={this.setDropZoneValues.bind(this)}
                  style={[styles.dropZone , {marginTop : 10}]}>
              </View>
              <View onLayout={this.setDropZoneValues.bind(this)}
                  style={[styles.dropZone , {marginTop : 10}]}>
              </View>
              <View onLayout={this.setDropZoneValues.bind(this)}
                  style={[styles.dropZone , {marginTop : 10}]}>
              </View>
            </ScrollView>


            {this.dataDrag.map((d, index) => (
                <Animated.View
                    key={index}
                    {...this.getPanResponder(index).panHandlers}
                    style={[styles.draggableContainer, this.pan[index].getLayout(), styles.circle]}>
                    <Text style={styles.text}>Drag {index}</Text>
                </Animated.View>
            ))}
        </View>
    );
  }
}

let styles = StyleSheet.create({
    mainContainer: {
        flex    : 1
    },
    dropZone    : {
        height  : 100,
        backgroundColor:'#2c3e50'
    },
    text        : {
        marginTop   : 25,
        marginLeft  : 5,
        marginRight : 5,
        textAlign   : 'center',
        color       : '#fff'
    },
    draggableContainer: {
        position    : 'absolute',
        marginTop         : Window.height/2 - CIRCLE_RADIUS,
        marginLeft        : Window.width/2 - CIRCLE_RADIUS,
    },
    circle      : {
        backgroundColor     : '#1abc9c',
        width               : CIRCLE_RADIUS*2,
        height              : CIRCLE_RADIUS*2,
        borderRadius        : CIRCLE_RADIUS
    },
});

基本思想是创建两个数组，模拟move通过从一个结构中删除并复制到另一个结构来实现效果。

一步步：

创建两个数组

this.state = {
    dataDrag: [...this.dataDrag],
    dataDragged: [],
};

OnPanResponderRelease，移动到新数组。

onPanResponderRelease           : (e, gesture) => {
    if(this.isDropZone(gesture)){
        let idx = this.state.dataDrag.indexOf(index+1);
        this.setState({
            showDraggable : false,
            dataDrag: [ ...this.state.dataDrag.slice(0, idx), ...this.state.dataDrag.slice(idx+1, this.state.dataDrag.length-1) ],
            dataDragged: [...this.state.dataDragged, this.state.dataDrag[idx]],
        });
    }

创建两组Animated.View, 里面的一个ScollView，其中之一。

最终代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PanResponder,
  Animated,
  Easing,
  Dimensions,
  Platform,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');

export class App extends Component<{}> {
  constructor(props){
    super(props);

    this.dataDrag      =  [1,2,3,4],
    this.pan = this.dataDrag.map( () => new Animated.ValueXY() );

    this.state = {
        showDraggable   : true,
        dropZoneValues  : null,
        entries : ['Apple1' , 'Apple2', 'Apple3'],
        dataDrag: [...this.dataDrag],
        dataDragged: [],
    };
}

getPanResponder(index) {
    return PanResponder.create({
        onStartShouldSetPanResponder: () => {
            return true;
        },
        onPanResponderMove              : Animated.event([null,{
            dx  : this.pan[index].x,
            dy  : this.pan[index].y
        }]),
        onPanResponderRelease           : (e, gesture) => {
            if(this.isDropZone(gesture)){
                let idx = this.state.dataDrag.indexOf(index+1);
                this.setState({
                    showDraggable : false,
                    dataDrag: [ ...this.state.dataDrag.slice(0, idx), ...this.state.dataDrag.slice(idx+1, this.state.dataDrag.length-1) ],
                    dataDragged: [...this.state.dataDragged, this.state.dataDrag[idx]],
                });
            }else{
                Animated.spring(
                    this.pan[index],
                    {toValue:{x:0,y:0}}
                ).start();
            }
        }
    });
}

isDropZone(gesture){
    var dz = this.state.dropZoneValues;
    return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
}

setDropZoneValues(event){
    this.setState({
        dropZoneValues : event.nativeEvent.layout
    });
}

_renderItem ({item, index}) {
    return (
        <View style={{width: Dimensions.get('window').width - 100 , height : 150 , backgroundColor : 'red' , marginLeft : 50 , marginRight : 50}}>
            <Text style={{color : 'black' , marginTop : 20}}>{item}</Text>
        </View>
    );
}

render(){
    return (
        <View style={styles.mainContainer}>

            <ScrollView>
              <View onLayout={this.setDropZoneValues.bind(this)}
                  style={[styles.dropZone , {marginTop : 10}]}>
              </View>
              <View onLayout={this.setDropZoneValues.bind(this)}
                  style={[styles.dropZone , {marginTop : 10}]}>
              </View>
              <View onLayout={this.setDropZoneValues.bind(this)}
                  style={[styles.dropZone , {marginTop : 10}]}>
              </View>

            {this.state.dataDragged.map((d, index) => (
                <Animated.View
                    key={d-1}
                    style={[styles.draggableContainer, this.pan[d-1].getLayout(), styles.circle]}>
                    <Text style={styles.text}>Drag {d-1}</Text>
                </Animated.View>
              ))}

            </ScrollView>

            {this.state.dataDrag.map((d, index) => (
                <Animated.View
                    key={d-1}
                    {...this.getPanResponder(d-1).panHandlers}
                    style={[styles.draggableContainer, this.pan[d-1].getLayout(), styles.circle]}>
                    <Text style={styles.text}>Drag {d-1}</Text>
                </Animated.View>
              ))}



        </View>
    );
  }
}

let styles = StyleSheet.create({
    mainContainer: {
        flex    : 1
    },
    dropZone    : {
        height  : 100,
        backgroundColor:'#2c3e50'
    },
    text        : {
        marginTop   : 25,
        marginLeft  : 5,
        marginRight : 5,
        textAlign   : 'center',
        color       : '#fff'
    },
    draggableContainer: {
        position    : 'absolute',
        marginTop         : Window.height/2 - CIRCLE_RADIUS,
        marginLeft        : Window.width/2 - CIRCLE_RADIUS,
    },
    circle      : {
        backgroundColor     : '#1abc9c',
        width               : CIRCLE_RADIUS*2,
        height              : CIRCLE_RADIUS*2,
        borderRadius        : CIRCLE_RADIUS
    },
});

Result:

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

ReactNative

reactnativeios

如何将拖动视图绑定到ScrollView项目中？的相关文章

如何使用 Firestore 中的对象数组更新 Field 中的特定对象？ [关闭]

Closed 这个问题正在寻求书籍工具软件库等的推荐不满足堆栈溢出指南 help closed questions 目前不接受答案所以我有一个emojiCounter字段用于存储对象数组例如 emojiCounter emoji
React Router 总是将我重定向到不同的 url

我是 React 和 React Router 的新手我正在使用 React Router v4 并遵循基于以前版本的教程但我让它工作了使用在 SO 上找到的一些东西和 React Router v4 文档上的一些东西但有一件事困扰
如何在React中处理多个路由器

假设我们有一个网络应用程序它通常有很多视图例如索引页面管理面板帮助页面联系人等我在主index js 中使用react router dom 来处理它们它工作得很好但是现在我在开发管理面板时遇到了问题它是 index js
如何创建在 React-Native 中检测自动位置的地图

我已经在react native中创建了地图参考https github com lelandrichardson react native maps https github com lelandrichardson react nat
使用 React Native 的 FlatList 进行 Swiper

我想让我的水平 FlatList 启用分页向左或向右滚动使内容始终位于屏幕中央并且下一个和上一个内容仍然出现 Something like this for the horizontal actions But unfortunate
监听 redux 动作

我想创建一个可重用的 redux 表模块它将存储和更新页码显示的总页数等我可以在所有页面之间共享这些模块但是我需要更新操作来触发刷新数据操作该操作将根据页面到达不同的端点因此可能类似于页面特定的监听 RefreshData
哪种反应钩子与 firestore onsnapshot 一起使用？

我在我的 React Native 应用程序中使用了大量的 Firestore 快照我也在使用 React hooks 代码看起来像这样 useEffect gt someFirestoreAPICall onSnapshot snaps
尝试注册 RCTBridgeModule 类 RCTFileReaderModule

尝试为名称 FileReaderModule 注册 RCTBridgeModule 类 RCTFileReaderModule 但该名称已由类 FileReaderModule 注册尝试使用命令react native run ios在i
如何解构 React props 并仍然访问其他 props？

我很好奇如果我想要所有的 props 但也想要解构单个属性那么组件的参数 props 是否可以像导入一样解构我想这更像是一个 JavaScript 问题而不是一个 React 问题但是举个例子 import React useEff
创建 html 结构，每个 li 中仅允许 3 个 div 元素。在 React + underscore.js 中

这是以下内容的位副本如何创建每个 li 中仅允许 3 个 div 元素的 html 结构在 React underscore js 中 https stackoverflow com questions 38008023 how to c
AWS JS SDK TypeError：STS 不是构造函数

我有一个 ReactJS 应用程序它使用 aws sdk 进行认知登录我用了yarn安装所有模块但是当我尝试访问 localhost 的网站时出现 JS 错误未捕获承诺中类型错误 STS 不是构造函数错误指向该行aws sd
如何将 Twitter 小部件嵌入到 Reactjs 中？

前往 Twitter 小部件网站 https publish twitter com https publish twitter com 我可以获得一个小部件添加到我的网站我正在使用示例代码来尝试了解它的工作原理 a class twit
如何正确地将代码从angularjs迁移到reactjs

我正在尝试将代码从 Angular 迁移到 React 不确定这是否正确只是需要一些帮助看看我是否朝着正确的方向前进我不知道角度所以我很困惑文本数据是否类似于反应中的状态我是否必须在顶部的状态中声明它角度代码 scope t
React 组件等待所需的 props 渲染

我正在父组件内部声明一个组件我想在一个文件中建立特定的道具然后在父组件中我希望能够同时为子组件建立其他道具因为它们是共享属性在大多数情况下我的问题是子组件尝试渲染并失败因为首先没有建立所需的道具类型有没有办法告诉子组件等待
语法：const {} = 变量名，任何人都可以解释或指出我正确的方向[重复]

这个问题在这里已经有答案了这个语法在 JavaScript 中意味着什么可能是 ES6 const 变量名我目前正在尝试掌握 React 在很多例子中我都遇到过这种语法例如 const girls guys women men st
react-native android fontFamily 不生效

问题一我在index android js的欢迎样式中添加了fontFamily 但没有效果 fontFamily 真的可以在 Android 上使用吗欢迎字体大小 20 fontFamily roboto thin 文本对齐居中
如何从react-bootstrap复选框获取值/属性？

我正在尝试使用反应引导复选框 https react bootstrap github io components html forms controls https react bootstrap github io components
React 错误：目标容器不是 DOM 元素

我刚刚开始使用 React 所以这可能是一个非常简单的错误但我们开始吧我的html代码非常简单 load staticfiles
React.js：可以在函数组件之外分配 useState() 吗？

是否有任何语法允许分配useState在功能组件之外到目前为止我已经尝试过但没有成功 import React useState useEffect from react import ReactDOM from react dom f
React 中的变异状态有哪些缺点？

我有一个带有顶级组件和许多嵌套子组件的 React 应用程序顶级组件是唯一具有状态的组件该状态采用单个变量的形式 this state g new BlackJackGame g 包含一个复杂的数据结构 class BlackJackG

随机推荐

如何使用元数据注释在 Dart 分析器中提供警告消息？

我创建了一个像这样的元数据注释 class UseInt const UseInt UseInt class Foo Should give a lint warning saying The class should only use i
防止 MEX 文件在 MATLAB 中崩溃

我有一个 MEX 文件是我从别人那里借来的用来帮助我编写半自动核检测算法问题是 MEX 文件偶尔会导致分段错误但是如果代码第二次使用相同的参数运行那就没问题了我希望有一种try catchMEX 文件的习语但在周六花了大
android 退出时清除应用程序缓存

我想要做的是在应用程序退出时清除应用程序的缓存我可以通过以下步骤手动完成此任务管理应用程序 gt 我的应用程序 gt 清除缓存 gt gt 但我想通过在应用程序退出时编程来完成这项任务请帮助我提前致谢要清除应用程序数据请尝试这种
使用 Microsoft Graph 查询 AzureAD Graph 扩展属性

我正在从 Azure AD Graph API 迁移到 Microsoft Graph 因为它现已弃用以前可以使用以下方式访问用户的扩展属性Microsoft Azure ActiveDirectory GraphClient GetEx
实体框架将两个表列映射到同一相关表键

我的情况是我有一张名为Elements 现在我正在创建一个名为Divergences基本上会存储成对的Elements 的目的Divergence是检查是否有两个Elements有不同的答案 Element Divergence Elem
如何检查列表中的所有元素是否符合条件？

我有一个列表其中包含许多子列表每个子列表包含 3 个元素例如 my list a b 0 c d 0 e f 0 每个子列表的最后一个元素是一个排序标志每个子列表的初始值为 0 随着我的算法的进展我想检查该标志是否至少有一个元素为
在 Inno Setup 中禁用静默和非常静默卸载

是否可以在 Inno Setup 中禁用静默和非常静默卸载您不能直接禁用它但您可以检查它是否以静默模式运行并在运行期间显示消息退出InitializeSetup InitialiseUninstall 事件函数 function In
Maven 结构和 Java EE 应用

如何在 Java EE 应用程序中组织 Maven 模块目前我们所做的是在父 POM 下拥有以下 Maven 模块 ear ejb ejb api core The ejb模块仅包含 EJB 类而core模块包含所有其他实用程序类包括
如何以编程方式获取有关 CellTable 标头的信息？

我正在使用 GWT 2 4 我有一个 com google gwt user cellview client CellTable 小部件但我无法找出在构造小部件后获取字符串标头的编程方法我像这样添加列数据 tableWidget add
标记上出现语法错误，需要使用variableDeclarator

SQLiteDatabase db this getWritableDatabase ContentValues cv new ContentValues cv put colDeptID 1 cv put colDeptName Sale
在视图中的模型中保存文件有效，但在 Celery 任务中无效

我遇到了这种非常奇怪的行为当我在视图中保存新的模型实例时分配的文件会被保存但是当我在 Celery 中这样做时实例会被保存但文件不会被保存这些是我的观点缩短 def post self request args kwargs
C++中需要知道一个目录是否有写权限

我需要知道指定的目录具有登录凭据的本地或共享路径是否具有写入权限我正在使用 GetFileAttributes 但它总是返回 FILE ATTRIBUTE DIRECTORY 而没有其他内容我的代码如下所示 if storageLo
构造函数接受参数时的 GTest 固定装置？

我有一个简单的示例类它有一个数据成员这是一个指向犰狳矩阵的指针的 std vector 构造函数将这样的向量作为唯一的参数这是文件TClass cpp include
使用 linq 从 xml 获取键值对

我如何使用 linq 从此 xml 示例中提取键值对
未找到方法或数据成员错误？

使用 VB 6 和 Crystal Report 9 我想在水晶报告中显示输出上周我使用了 VB 6 和 Crystal Report 8 5 运行良好但最后一天我重新安装了 Windows XP VB 6 和 Crystal Repo
java中如何监控文件夹的变化？

我有以下代码用于监视文件夹中 java 中的任何更改 public class FolderWatcher public List
为什么 boost 包含两个不同版本的 Strong_typedef.hpp？

当我最近构建一个项目时我注意到我收到了关于以下内容的编译器警告变成错误 BOOST STRONG TYPEDEF宏被重新定义经过进一步调查我注意到有两个不同的版本strong typedef hpp包含在 boost 中一个位于顶
如何使用 Bash 从一组字符串 B 中过滤出一组字符串 A

我有一个字符串列表我想从另一个字符串的超集中删除这些字符串而不是按任何特定顺序从而构造一个新的集合这在 Bash 中可行吗看起来您正在寻找运行时间优于 O nm 的东西所以这里有一个答案 Fgrep 或 grep F 使用 Ah
使用 localhost 测试 Facebook 共享对话框 - “无法解析 URL http://localhost 处的对象”

我正在尝试仅使用 URL 而不是 SDK 来使用当前在提出此问题时的 Facebook 共享对话框我的 JS 看起来像这样 openFacebookPopup function url this openSharerWindow ht
如何将拖动视图绑定到ScrollView项目中？

我创造了ScrollView具有三视图我想将拖动的视图绑定到ScrollView 其余没有拖放的视图应该保持在外面ScrollView 怎么可能请参阅 GIF 我想在 ScrollView 中添加draggableView Code i