javascript - helmet - React ScrollView anidado nativo bloqueado

react router

Question

Estoy intentando anidar ScrollViews en React Native; un desplazamiento horizontal con desplazamiento vertical anidado.

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 desplazamiento externo funciona sin problemas, pero el interno se pega cuando lo tocas mientras se mueve. Lo que quiero decir es: si te desplazas, levantas tu dedo y lo tocas de nuevo mientras se mueve con ímpetu, se detiene y no reacciona para tocar movimientos. Para desplazarse más, tiene que levantar el dedo y volver a tocar.

Esto es tan reproducible que parece tener algo que ver con el respondedor de gestos.

¿Alguien ha visto este problema?

¿Cómo podría incluso comenzar a depurar esto? ¿Hay alguna manera de ver qué responde a los toques, otorgar y liberar, y cuándo?

Gracias.

Actualizar:

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

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

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

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

Answer 1

@IlyaDoroshin y la respuesta de @David Nathan me apuntaron en la dirección correcta, pero tuve que ajustar cada elemento en la vista de desplazamiento con un toque, en lugar de tocar uno para todo.

<ScrollView>
  ...
  <ScrollView horizontal>
    {items.map(item => (
        <TouchableWithoutFeedback>
          { /* your scrollable content goes here */ }
        </TouchableWithoutFeedback>
    ))}
  </ScrollView>
</ScrollView>

Answer 2

En su panresponder para el interno, intente configurar esto:

onPanResponderTerminationRequest: () => false

Answer 3

Envolviendo el contenido desplazable de ScrollView anidado con este fijo para mí en Android:

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

Answer 4

Modifique node_modules/react-native/Libraries/Components/ScrollResponder.js : Línea 136 (Consulte ACTUALIZACIÓN):

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

ACTUALIZACIÓN: me parece que si la vista de desplazamiento está animando actualmente y quiere convertirse en el respondedor, entonces rechazará. Línea 189 en ScrollResponder.js. Así que modifico Line 340 y me funciona:

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

Usted puede ver aquí: https://github.com/facebook/react-native/issues/41