reactjs - 是否可以将项目拖动到水平 FlatList 范围之外?
问题描述
我正在使用 React Native 库开发 FotoBook 应用程序。在我让用户从设备库中选择图像后,我将它们以水平模式放入 FlatList 组件中。那么如何将所选图像拖放到屏幕的另一部分
我正在使用 PanResponder 和 Animated API,它可以很好地转换响应者坐标,但是当我尝试超出水平 FlatList 的范围时,它会被隐藏。我试图将溢出设置为可见并更改 zIndex 但它不起作用
以下是截图:
这是我的代码:
import React from 'react';
import {
SafeAreaView,
View,
FlatList,
Text,
StyleSheet,
Animated,
PanResponder
} from 'react-native';
import { v4 } from 'uuid';
export default class App extends React.PureComponent{
state = {
data: [
{ id: v4(), title: 'Lightcoral', hex: '#eb7474' },
{ id: v4(), title: 'Orchid', hex: '#eb74dc' },
{ id: v4(), title: 'Mediumpurple', hex: '#9a74eb' },
{ id: v4(), title: 'Mediumslateblue', hex: '#8274eb' },
{ id: v4(), title: 'Skyblue', hex: '#74b6eb' },
{ id: v4(), title: 'Paleturquoise', hex: '#93ece2' },
{ id: v4(), title: 'Palegreen', hex: '#93ecb6' },
{ id: v4(), title: 'Khaki', hex: '#d3ec93' }
]
}
_position = new Animated.ValueXY()
_panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (event, gesture) => {
this._position.setValue({ x: gesture.dx, y: gesture.dy})
},
onPanResponderRelease: () => {}
})
_keyExtractor = (item) => item.id;
_renderItem = ({item}) => {
return (
<Animated.View
style={this._position.getLayout()}
{...this._panResponder.panHandlers}
>
<View style={[styles.itemBox, {backgroundColor: `${item.hex}`}]}>
<Text>{item.title}</Text>
</View>
</Animated.View>
)
}
render() {
const { data } = this.state
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<View style={styles.targetArea}>
<Text>Drop HERE!!!</Text>
</View>
<View style={{ height: 80, borderColor: 'black', borderWidth: 2 }}>
<FlatList
data={data}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
horizontal={true}
/>
</View>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
safeArea: {
flex: 1
},
container: {
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#fff',
},
itemBox: {
width: 80,
height: 80,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#fff'
},
targetArea: {
height: 150,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#eee',
backgroundColor: '#F5FCFF',
marginTop: 40
}
});
解决方案
推荐阅读
- node.js - 当我有两个不同的文件夹时如何将我的应用程序部署到heroku
- smalltalk - 以编程方式更改 GLMStacker 选项卡(Glamour、Smalltalk)
- r - 如何在 ggplot 中创建更好的渐变?
- angular - 使用 Angular Observable 重新加载时页面崩溃
- javascript - 如果 v-bind: 值是对象,则选择选项
- go - 结构中的切片字段被最后一个值覆盖
- javascript - 如何将 PHP 数组作为参数从 onClick HTML 按钮传递给 JavaScript?
- javascript - Angular/RxJS - 将一个 promise 和内部 observable 转换为一个要返回的 observable
- entity-framework - dotnet-aspnet-codegenerator 脚手架控制器:找不到主键
- java - 使用 javax 包类将列表数据转换为 Json