PanResponder über einen TextInput in reaktionsnativen

Question

Ich bin mit einem Problem auf React-native konfrontiert. Ich habe TextInput, die den ganzen Bildschirm dauert. Ich möchte den Inhalt dieser Texteingabe ändern, wenn der Benutzer nach oben oder unten wischt. Dazu benutze ich eine PanResponder.

Das Problem ist, dass die PanResponder den Fokus von der TextInput stiehlt: Wenn ich auf dem TextInput klicken, wird die Tastatur nicht angezeigt und ich kann nicht seinen Wert ändern.

Gibt es einen Weg, um sowohl die PanResponder und den Textinput koexistieren zu haben, so dass ein Hahn auf den TextInput konzentrieren und eine Durchzug noch die PanResponder Rückrufe auslösen?

reduzierte ich den Code auf das Minimum, das Problem zu reproduzieren benötigt:

export default class EditNoteScreen extends Component { 
    componentWillMount() { 
    this.panResponder = PanResponder.create({ 
     onStartShouldSetPanResponder:() => true, 
     onStartShouldSetPanResponderCapture:() => true, 
     onMoveShouldSetResponderCapture:() => true, 
     onMoveShouldSetPanResponderCapture:() => true 
    }); 
    } 

    render() { 
    return (
     <View style={stylesNote.editScreen} {...this.panResponder.panHandlers}> 
     <View style={stylesNote.editScreenContent}> 
      <TextInput style={stylesNote.editScreenInput}> 
      Hello 
      </TextInput> 
     </View> 
     </View> 
    ); 
    } 
} 

Styles:

editScreen: { 
    flex: 1 
    }, 

    editScreenContent: { 
    flex: 5 
    }, 

    editScreenInput: { 
    flex: 1, 
    borderColor: "transparent", 
    paddingLeft: 20, 
    paddingRight: 10 
    } 

Answer 1

Ja, es ist möglich, dass PanResponder und die TextInput zu koexistieren. Ihr Problem ist, dass Sie immer true von Ihren Panhandlern zurückgeben. Das bedeutet, dass Panhandler den Fokus bekommen.

Zum Beispiel eines meiner Projekte wollte ich PanResponder nur erfassen Ereignis beim Bewegen des Fingers. Aber ich hatte auch TouchableOpacity innen auch, also stahl PanResponder immer den Fokus.

Um dies zu beheben Ich modifizierte onMoveShouldSetPanResponderCapture Funktion mit benutzerdefinierten Logik und nicht immer true zurückgeben. Also in Ihrem Fall weiß ich nicht, was Sie tun, aber alle Panhandler erhalten nativeEvent und gestureState als Parameter. So können Sie sie beispielsweise in Ihrer benutzerdefinierten Logik verwenden. Hier

ist ein Beispiel:

onMoveShouldSetPanResponderCapture: (evt, gestureState) => Math.abs(gestureState.dy) > 5 

Das bedeutet, dass, wenn die Y-Achsen-Bewegung über 5 Pixel ist, dann wird nur panresponder den Fokus erhalten. Sonst werden andere Elemente wie zB TextInput den Fokus bekommen.