2017-12-12 3 views
2

Ich entwickle eine App mit nativen Reaktion. Ich habe dieses UI-Element, das dem von Maps in iOS ähnelt, in dem Sie ein Panel von der Unterseite schieben und darin eine scrollbare Liste.Native Slide-Panel und Scrollview reagieren

Für die herausschiebbare Platte verwende ich eine Komponente namens rn-sliding-up-panel. Es hat mehrere Requisiten als Event-Listener. Zum Beispiel

<SlidingUpPanel 
    allowDragging={/*Boolean*/} 
    onDragStart={()=>{} /*When it is about to be dragged*/} 
    onDrag={()=>{} /*When it is being dragged*/} 
    onDragEnd={()={} /*When the user is no longer touching the screen*/} 
></SlidingUpPanel> 

Im Inneren habe ich ein <ScrollView> eine <List> von react-native-elements enthält. Soweit ich weiß, hat es nur eine Lüftungs Zuhörer, wobei:

<ScrollView onScroll={()=>{}}></ScrollView> 

Mein Problem ist, dass tatsächlich auf der Liste Scrollen die Platte verursacht (es durch Abrutschen schließt) zu schließen. Ich fand ein Work-around durch einen Zustand zugibt und modfiying es OnScroll:

state = { 
    dragPanel: true, 
} 
/*===========================================*/ 
<SlidingUpPanel allowDragging={this.state.dragPanel}> 
    <ScrollView onScroll={()={ this.setState({dragPanel: false}) }}></ScrollView> 
</SlidingUpPanel> 

Allerdings kann ich nicht einen Weg finden, das Ziehen wieder herzustellen, und es nicht so effizient anwerfen.


TL; DR

Gibt es einen Weg, um eine eficient Scroll in einem SlidingUpPanel ohne die Ereignisse jedes überlappende zu implementieren? Vielleicht mit etwas ähnlich wie function(e){e.preventDefault();}?

Antwort

1

Um richtig zu deaktivieren/restore äußeren Spirale ziehen, tun

_onGrant() { 
    this.setState({ dragPanel: false }); 
    return true; 
} 

_onRelease() { 
    this.setState({ dragPanel: true }); 
} 

constructor(props) { 
    super(props); 

    this._onGrant = this._onGrant.bind(this); 
    this._onRelease = this._onRelease.bind(this); 

    this._panResponder = PanResponder.create({ 
    onMoveShouldSetPanResponder: this._onGrant, 
    onPanResponderRelease: this._onRelease, 
    onPanResponderTerminate: this._onRelease, 
    }); 
} 

render() { 
    <SlidingUpPanel allowDragging={this.state.dragPanel}> 
    <ScrollView 
     {...this._panResponder.panHandlers} 
    /> 
    </SlidingUpPanel> 
} 

Von dem, was ich für eine lange Zeit hatte gesucht, ist preventDefault() eine reine Web-javascript Sache, ich glaube, es keine preventDefault sind in reagieren-native.

Aus dem Dokument Abschnitt Handling Touches, reagieren-native nur Javascript verwenden ObjC (iOS) & Java (Android) Ereignisse zu simulieren.

+0

Danke für die Beantwortung. Soweit ich weiß, sollte 'onGrant()' ausgelöst werden, wenn der Benutzer scrollt, und '_onRelease()', wenn der Benutzer den Bildlauf stoppt. Und 'this._panResponder' feuert sie entsprechend an. Wie soll ich das aber in die '' ?? (Das heißt, kein Eigenschaftsname oder irgendetwas?) – edvilme

+0

@edvilme '{... this._panResponder.panHandlers}' tut genau, was Sie beschreiben. das nannte * Requisiten zu übertragen * https://zhenyong.github.io/react/docs/transferring-props.html – Val

+0

Vielen Dank. Leider scheint dies das Problem nicht zu lösen. Es hat mir jedoch geholfen, ich habe einen Ereignis-Listener zu einem Handle hinzugefügt und das Ziehen in allen Scroll-Ereignissen abgelehnt. Vielen Dank!!! – edvilme

Verwandte Themen