我的用例是在文本输入聚焦时在文本输入下显示选项列表,例如谷歌自动完成。问题是我可以显示/隐藏列表,但列表选项上的触摸事件没有触发。
代码如下:
renderListItem({item, index}){
return <TouchableHighlight underlayColor="#e6e6e6" activeOpacity={0.5} style={[styles.rowCont]} onPress={()=>this.handleListItemPress(item)}>
<Text>{item.label}</Text>
</TouchableHighlight>
}
render() {
let listPosition = this.props.positionObj; //View prop onlayout object.
let resultDesign = this.props.visible ?
<View style={[styles.optionsCont, { top: listPosition.y + listPosition.height, left: listPosition.x }]}
onStartShouldSetResponder={(event)=>{console.log("Setting responder..."); return true}}
onResponderReject={(event)=>{console.log("The responder request is rejected.")}}
onResponderTerminate={(event)=>{console.log("The responder has been taken from the View.")}}>
<FlatList
data={this.props.listData}
renderItem={this.renderListItem}
keyExtractor={this.keyExtractor}
/>
</View>:
<View/>;
return resultDesign;
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},
optionsCont: {
position: "absolute",
zIndex: 2,
top: 20,
right: 20,
borderRadius: 6,
borderWidth: 1,
borderColor: "#e6e6e6",
},
rowCont: {
paddingHorizontal: 10,
paddingVertical: 10,
borderBottomWidth: 1,
borderColor: "#e6e6e6",
backgroundColor: "yellow"
},
});
响应者 Prop 也永远不会触发。我想这是因为最初没有渲染 View 。请提出一种实现这一目标的方法。我宁愿不使用库,除非实现起来太耗时。
最佳答案
我认为响应者未能设置,因为
onStartShouldSetResponder={(event)=>{console.log("Setting responder..."); return true}}
尝试将该行更改为
onStartShouldSetResponder={()=>true}
我认为,但不是 100% 肯定,以您的方式调用它实际上并没有调用匿名函数,因此没有设置响应者。
您还可以尝试初始化 PanResponder 并将其附加到 View 当组件安装使用构造函数来规避最初未呈现的 View 问题时。
关于react-native - 在最初隐藏然后在用户操作中可见的元素上获取触摸事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53588691/