Estoy tratando de anidar ScrollViews en React Native; un desplazamiento horizontal con desplazamientos verticales anidados.

Aquí hay un ejemplo:

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

El scroller exterior funciona perfectamente, pero el interior se pega cuando lo tocas mientras se mueve. Lo que quiero decir es: si te desplazas, levantas el dedo y lo vuelves a tocar mientras todavía se está moviendo con impulso, se detiene y no reacciona en absoluto a los movimientos táctiles. Para desplazarte más tienes que levantar el dedo y tocar de nuevo.

Esto es tan reproducible que se siente como algo relacionado con Gesture Responder.

¿Alguien ha visto este problema?

¿Cómo podría comenzar a depurar esto? ¿Hay alguna manera de ver qué está respondiendo a los toques, otorgando y liberando, y cuándo?

Gracias.

Actualizar:

Parece que es el sistema de respuesta, al colocar oyentes onResponderMove en los desplazadores internos y externos:

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

Está claro que el ScrollView externo está tomando el control. La pregunta, supongo, es ¿cómo evito que el desplazador externo tome el control cuando intento desplazarme verticalmente? ¿Y por qué esto solo sucede cuando intenta desplazar un ScrollView interno que ya se está moviendo?