react-native - 如何在水平 FlatList 中使用 PanResponder
问题描述
我想从水平 FlatList 中拖出所选项目并将其放到屏幕的另一个区域。问题是我的 FlatList 包装器必须具有固定的高度,并且当尝试将所选元素拉出时,FlatList 组件会溢出它并且我的元素会被隐藏。
我试图更改 zIndex 并将溢出设置为可见,但它不能正常工作,因为设置 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
}
});
我想在屏幕上移动 flatList 的选定项目并将其放在屏幕的任何其他元素之上,如果我可以简单地以编程方式设置每个元素的 zIndex - 我会欣喜若狂,但不幸的是它似乎没有那么简单那样。请帮助我我非常绝望(((
解决方案
设置overflow
为visible
FlatList 样式。
推荐阅读
- html - 有没有办法让“输入”击键单击特定按钮?
- c - 在函数中使用指针并修改 main()
- android-studio - Android Studio In App Billing 如何在设备上验证购买?
- angular - 如何在表单上实现自定义验证器,其中验证逻辑需要来自可观察对象的数据
- javascript - Javascript:无法设置未定义的属性
- javascript - MySql SELECT 多个根据表单输入和发布
- python - 如何写入另一个 Google App Engine 应用程序?
- scala - 如何在Scala中检查字符串的字符是否包含整数?
- tensorflow - (base) Admin's-iMac:~ admin$ ,这是什么(base)?康达安装后
- python - 为什么我使用 Windows 身份验证通过 AzureML dataprep 登录 MS SQL 失败?