获取元素上的触摸事件，该元素最初被隐藏，然后在用户操作时可见

Question

我的用例是在文本输入集中时显示文本输入下的选项列表，比如谷歌自动完成。问题是我可以显示/隐藏列表，但列表选项上的触摸事件不会触发。

代码如下：

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"
},
});

响应者道具也从不开火。我想这是因为视图最初没有渲染。请提出实现这一目标的方法。我不喜欢使用库，除非它太耗时而无法实现。

Answer 1

我认为由于，响应程序设置失败

onStartShouldSetResponder={(event)=>{console.log("Setting responder..."); return true}}

尝试将该行更改为

onStartShouldSetResponder={()=>true}

我认为，但不是100%确定，以你现在的方式调用它实际上并没有调用匿名函数，因此没有设置响应程序。

您也可以尝试初始化PanResponder，并在组件装载时使用构造函数将其附加到视图，以避免最初未呈现视图的问题。