Question

我的用例是在文本输入集中显示文本输入时显示选项列表，例如google autocomplete。问题是我可以显示/隐藏列表，但是列表选项上的触摸事件没有触发。

代码如下：

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并在使用构造函数装入组件以规避最初未呈现的视图的问题时将其附加到View。

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

1 个答案: