React Native ScrollView – ¿Cómo desplazar los elementos uno por uno?

Solución:

Asumiendo que quieres snap a un elemento horizontal o verticalmente, su posición debe fijarse en relación con la pantalla (donde debería encajar)

Dado que los accesorios están disponibles solo para IOS, por lo tanto

Puedes usar

• decelerationRate– Establezca la tasa de desaceleración en 0, una vez que el usuario levanta el dedo
• snapToAlignment – Establecer el alignmnet en un elemento particular para centrar

• snapToInterval – Establezca el intervalo al que ajustar en función de su contentInset accesorios.

  <ScrollView 
      horizontal
      decelerationRate={0}
      snapToInterval={width - (YOUR_INSET_LEFT + YOUR_INSET_RIGHT)}
      snapToAlignment={"center"}
      contentInset={{top: 0, left: YOUR_INSET_LEFT, bottom: 0, right: YOUR_INSET_RIGHT,
      }}>
      <Comp/>
      <Comp/>
      <Comp/>
      <Comp/>
    </ScrollView>
  

Usar disableIntervalMomentum={ true } en tus ScrollView. Esto solo permitirá al usuario desplazarse una página a la vez horizontalmente.

https://reactnative.dev/docs/scrollview#disableintervalmomentum

<ScrollView 
  horizontal
  disableIntervalMomentum={ true } 
  snapToInterval={ width }
>
  <Child 1 />
  <Child 2 />
</ScrollView>

---

---

Utiliza Nuestro Buscador