Reagiere native verschachtelte ScrollView-Sperre

Question

Ich versuche ScrollViews in React Native zu verschachteln; ein horizontaler Scroll mit verschachtelten vertikalen Scrolls.

Hier ist ein Beispiel:

var Test = React.createClass({ 
    render: function() { 
     return (
      <ScrollView 
       style={{width:320, height:568}} 
       horizontal={true} 
       pagingEnabled={true}> 

       {times(3, (i) => { 
        return (
         <View style={{width:320, height:568}}> 

          <ScrollView> 
           {times(20, (j) => { 
            return (
             <View style={{width:320, height:100, backgroundColor:randomColor()}}/> 
            ); 
           })} 
          </ScrollView> 

         </View> 
        ); 
       })} 

      </ScrollView> 
     ); 
    }, 
}); 

AppRegistry.registerComponent('MyApp',() => Test); 

Die äußere scroller funktioniert einwandfrei, aber die innere Sticks, wenn man sie berührt, während er sich bewegt. Was ich meine ist: Wenn du scrollst, hebst du deinen Finger und berührst ihn erneut, während er sich noch mit Schwung bewegt, er stoppt und reagiert überhaupt nicht auf Berührungen. Um mehr zu blättern, müssen Sie Ihren Finger heben und erneut berühren.

Dies ist so reproduzierbar es fühlt sich an wie etwas mit dem Gesture Responder zu tun.

Hat jemand dieses Problem gesehen?

Wie würde ich überhaupt damit anfangen zu debuggen? Gibt es eine Möglichkeit zu sehen, was auf Berührungen reagiert, gewährt und freigibt und wann?

Danke.

Update:

Es sieht aus wie es die Responder-System, indem onResponderMove Zuhörer auf den inneren und äußeren scrollers:

<ScrollView 
    onResponderMove={()=>{console.log('outer responding');}} 
    ... 

    <ScrollView 
     onResponderMove={()=>{console.log('inner responding');}}> 
     ... 

Es ist klar, dass die äußere Scrollsteuerung greifen. Die Frage ist, wie kann ich verhindern, dass der äußere Farbwechsler beim vertikalen Scrollen die Kontrolle übernimmt? Und warum passiert das nur, wenn Sie versuchen, einen bereits bewegten inneren ScrollView zu scrollen?

Answer 1

Ändern node_modules/react-native/Libraries/Components/ScrollResponder.js: Linie 136 (siehe UPDATE):

scrollResponderHandleScrollShouldSetResponder: function(): boolean { 
    return this.state.isTouching; 
}, 

UPDATE: Ich finde, wenn die Scroll-Ansicht derzeit Animieren und will der Responder werden, dann wird es ablehnen. Zeile 189 in ScrollResponder.js. So ändern I-Linie 340 und es für mich arbeiten:

scrollResponderIsAnimating: function(): boolean { 
    // var now = Date.now(); 
    // var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime; 
    // var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS || 
    // this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime; 
    // return isAnimating; 
    return false; 
}, 

Sie können hier sehen: https://github.com/facebook/react-native/issues/41

Answer 2

In Ihrem panresponder für die innere, versuchen Sie diese Einstellung:

onPanResponderTerminationRequest:() => false 

Answer 3

Wrapping scrollbaren Inhalt von verschachtelten ScrollView mit dieser für mich auf Android:

<ScrollView> 
    ... 
    <ScrollView horizontal> 
    <TouchableWithoutFeedback> 
     { /* your scrollable content goes here */ } 
    </TouchableWithoutFeedback> 
    </ScrollView> 
</ScrollView>