React Native scrolled ScrollView nidificato

Question

Sto tentando di annidare ScrollViews in React Native; una pergamena orizzontale con scroll verticali annidati.

Ecco un esempio:

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); 

La barra di scorrimento esterno funziona perfettamente, ma quella interna bastoni quando si tocca mentre è in movimento. Ciò che intendo è: se scorri, alza il dito e lo tocchi di nuovo mentre è ancora in movimento con lo slancio, si arresta e non reagisce affatto ai movimenti tattili. Per scorrere di più devi alzare il dito e toccare di nuovo.

Questo è così riproducibile che sembra essere qualcosa a che fare con il Gesture Responder.

Qualcuno ha visto questo problema?

Come potrei iniziare a eseguire il debug di questo? C'è un modo per vedere cosa risponde ai tocchi, concedere e rilasciare e quando?

Grazie.

Aggiornamento:

Sembra che è il sistema di risponditore, mettendo onResponderMove ascoltatori sulle scrollers interno ed esterno:

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

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

E 'chiaro che lo ScrollView esterno è afferrando il controllo. La domanda, immagino, è: come posso impedire che lo scroller esterno prenda il controllo quando si prova a scorrere verticalmente? E perché questo succede solo quando provi a scorrere un ScrollView interno già in movimento?

Answer 1

Modifica node_modules/react-native/Libraries/Components/ScrollResponder.js: Linea 136 (Vedi UPDATE):

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

UPDATE: Trovo se la vista di scorrimento è attualmente animando e vuole diventare il risponditore, allora rifiuterà. Riga 189 in ScrollResponder.js. Così modifico linea 340 e il lavoro per me:

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

Potete vedere qui: https://github.com/facebook/react-native/issues/41

Answer 2

Nella vostra panresponder per quella interna, provare ad impostare questo:

onPanResponderTerminationRequest:() => false 

Answer 3

Wrapping contenuto scorrevole di ScrollView annidato con risolto questo per me su Android:

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