react-native - 绝对定位时 FlatList 滚动中断
问题描述
反应原生:0.63.3
首先让我先说我现在已经花了大约 6 小时试图解决这个问题,但我还没有在任何地方找到适合我设置的在线解决方案。
我所拥有的是具有以下布局的页面(从实际用例大大简化,但同样的问题)
每个红色框都是一个视图。搜索输入下拉菜单设置为覆盖红色框视图,它确实
但问题是,只有当我的鼠标位于搜索输入和第一个视图之间的那个空间中时,FlatList 才会滚动。一旦我的鼠标位于 View 上方,FlatList 似乎会忽略滚动。
这是该代码的最基本版本:
import React, { useState } from 'react';
import { FlatList, View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
export const myStyles = StyleSheet.create({
container: {
minWidth: '100%',
borderRadius: 3,
padding: 10,
backgroundColor: 'white'
},
search: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
flex: 1,
height: 50,
marginBottom: 50
},
textInput: {
width: '100%',
borderWidth: 1,
borderColor: 'blue'
},
flatlistContainer: {
position: 'absolute',
zIndex: 99999,
height: 180,
width: 300
},
inputRow: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 0,
paddingRight: 0,
paddingTop: 5,
paddingBottom: 5
},
itemRow: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'silver'
},
buttonText: {
alignSelf: 'flex-start',
fontSize: 13,
margin: 0,
padding: 5
}
});
const MyComponent = () => {
const [inputValue, setInputValue] = useState('');
const options = [
{label: 'one', value: 'one'},
{label: 'two', value: 'two'},
{label: 'three', value: 'three'},
{label: 'four', value: 'four'},
{label: 'five', value: 'five'},
{label: 'six', value: 'six'},
{label: 'seven', value: 'seven'},
{label: 'eight', value: 'eight'},
{label: 'nine', value: 'nine'},
{label: 'ten', value: 'ten'},
{label: 'eleven', value: 'two'}
];
return (
<View style={myStyles.container}>
<View style={[myStyles.inputRow, { zIndex: 9999999 }]}>
<View style={[myStyles.search]}>
<TextInput
value={inputValue}
onChangeText={(value) => setInputValue(value)}
placeholder="Search..."
style={myStyles.textInput}
/>
<View>
<View style={myStyles.flatlistContainer}>
<FlatList
data={options}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => console.log ('pressed')}>
<View style={myStyles.itemRow}>
<Text style={myStyles.buttonText}>
{item.label}
</Text>
</View>
</TouchableOpacity>
)}
keyExtractor={item => item.label}
/>
</View>
</View>
</View>
</View>
<View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
<View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
<View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
<View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
<View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
<View style={[myStyles.inputRow, { borderWidth: 1, borderColor: 'red', height: 50 }]} />
</View>
);
}
export default MyComponent;
解决方案
你可以这样做,因为在这里我看到你的平面列表落后了,所以你的平面列表不起作用
flatlistContainer: {
position: 'absolute',
height: 180,
width: 300,
elevation: 4,
zIndex: 1000
},
推荐阅读
- spring - 没有为请求类型 [request.model.RTPRequest] 和内容类型 [application/x-java-serialized-object] 找到合适的 HttpMessageConverter
- javascript - 大型 SQL OR 语句或代码中的过滤器?
- javascript - 通过 JavaScript 设置文件输入的值会触发一个看似无关的事件
- javascript - 什么语言/技术使用语法 <%VARIABLE%> 以及它是如何使用的?
- java - 如何在知道其包名称的情况下获取已安装应用程序的请求权限?
- python-3.x - 微调的 VGG-16 对所有测试图像给出完全相同的预测
- node.js - Google Cloud Function/NodeJS - 从 JSON 表单事件解析 int
- java - 带有 MySQL 的 JPA 返回错误的最后插入 id
- python - 熊猫将一帧中的值分配给选定行中另一帧中的对应列
- c - 无法在 C 中输出预期的 **argv