react-native - 在最初隐藏然后在用户操作中可见的元素上获取触摸事件

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

响应者 Prop 也永远不会触发。我想这是因为最初没有渲染 View 。请提出一种实现这一目标的方法。我宁愿不使用库，除非实现起来太耗时。

Answer 1

我认为响应者未能设置，因为

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

尝试将该行更改为

onStartShouldSetResponder={()=>true}

我认为，但不是 100% 肯定，以您的方式调用它实际上并没有调用匿名函数，因此没有设置响应者。

您还可以尝试初始化 PanResponder 并将其附加到 View 当组件安装使用构造函数来规避最初未呈现的 View 问题时。