web-dev-qa-db-fra.com

Défilement horizontal de scrollview

Salut, j'essaie d'obtenir scrollview alignement au centre Comme ci-dessous gif lien 

Cochez cette Gif

Mais incapable de le faire. Voici mon code natif de réaction pour y parvenir.

ou existe-t-il une méthode permettant de faire défiler un index particulier d'éléments scrollview comme Android?

Toute aide serait appréciée ... Merci d'avance

         <ScrollView

                                  style={[styles.imgContainer,{backgroundColor:colorBg,paddingLeft:20}]}
                                  automaticallyAdjustInsets={false}

                                  horizontal={true}
                                  pagingEnabled={true}
                                  scrollEnabled={true}
                                  decelerationRate={0}
                                  snapToAlignment='center'
                                  snapToInterval={DEVICE_WIDTH-100}
                                  scrollEventThrottle={16}
                                  onScroll={(event) => {
                                    var contentOffsetX=event.nativeEvent.contentOffset.x;
                                    var contentOffsetY=event.nativeEvent.contentOffset.y;

                                    var  cellWidth = (DEVICE_WIDTH-100).toFixed(2);
                                    var cellHeight=(DEVICE_HEIGHT-200).toFixed(2);

                                    var  cellIndex = Math.floor(contentOffsetX/ cellWidth);

                                    // Round to the next cell if the scrolling will stop over halfway to the next cell.
                                    if ((contentOffsetX- (Math.floor(contentOffsetX / cellWidth) * cellWidth)) > cellWidth) {
                                     cellIndex++;
                                    }

                                    // Adjust stopping point to exact beginning of cell.
                                    contentOffsetX = cellIndex * cellWidth;
                                    contentOffsetY= cellIndex * cellHeight;

                                    event.nativeEvent.contentOffsetX=contentOffsetX;
                                    event.nativeEvent.contentOffsetY=contentOffsetY;

                                    // this.setState({contentOffsetX:contentOffsetX,contentOffsetY:contentOffsetY});



                                    console.log('cellIndex:'+cellIndex);

                                    console.log("contentOffsetX:"+contentOffsetX);
                                      // contentOffset={{x:this.state.contentOffsetX,y:0}}



                                  }}
                                  >
                                    {rows}

                                </ScrollView>
iosreact-nativehorizontalscrollviewreact-native-scrollview
13
Srinivas Guni

Vous n'avez pas besoin d'autres bibliothèques, vous pouvez le faire avec ScrollView. Tout ce dont vous avez besoin est d'ajouter les accessoires suivants dans votre composant.

    horizontal= {true}
    decelerationRate={0}
    snapToInterval={200} //your element width
    snapToAlignment={"center"}

Vérifiez cette collation pour plus de détails sur la façon de la mettre en œuvre https://snack.expo.io/H1CnjIeDb

22
Vasil Enchev

Il y a plusieurs options. Voici deux que j'ai essayé et fonctionne bien. Je préfère le second parce que, comme le dit la documentation "comme ListView, cela peut générer des centaines de pages sans problème de performances".

  1. react-native-page-swiper
  2. react-native-viewpager
2
George

Utilisez la propriété pagingEnabled dans ScrollView.

const screenHeight = Dimensions.get('window').height;

class Screen extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ScrollView pagingEnabled>
        <Page1 style={{height: screenHeight}} />
        <Page2 style={{height: screenHeight}} />
      </ScrollView>
    );
  }
}
0
phatmann