Moim przypadkiem użycia jest pokazanie listy opcji pod wprowadzaniem tekstu, gdy ten tekst jest skupiony, na przykład autouzupełnianie Google. Problem polega na tym, że mogę pokazać/ukryć listę, ale zdarzenia dotykowe na opcjach listy nie uruchamiają się.

Kod wygląda następująco:

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

Rekwizyty odpowiadające również nigdy nie odpalają. Myślę, że to dlatego, że widok początkowo nie jest renderowany. Proszę zasugerować sposób, aby to osiągnąć. Wolę nie używać biblioteki, chyba że jej wdrożenie jest zbyt czasochłonne.

3
M.S. Nikhil 3 grudzień 2018, 09:41

1 odpowiedź

Najlepsza odpowiedź

Myślę, że responder nie ustawia się z powodu

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

Spróbuj zmienić tę linię na

onStartShouldSetResponder={()=>true}

MYŚLĘ, ale nie jestem w 100% pewien, że wywołanie tego w taki sposób, w jaki jesteś, w rzeczywistości nie wywołuje funkcji anonimowej, a zatem nie ustawia Respondera.

Można również spróbować zainicjować PanResponder i dołączyć go do widoku, gdy montuje się komponent przy użyciu konstruktora, aby obejść widok, który nie jest początkowo renderowany.

1
Nerdragen 3 grudzień 2018, 10:20