webentwicklung-frage-antwort-db.com.de

Das Einrasten der horizontalen Bildlaufansicht reagiert nativ

Hallo, ich versuche, scrollview zu erreichen Wie unten gif link 

Dieses Gif überprüfen

Aber nicht dazu in der Lage. Nachfolgend ist mein reagierter nativer Code, um dies zu erreichen.

oder gibt es eine Methode, um zu einem bestimmten Index von Scrollview-Elementen wie Android zu scrollen?

Jede Hilfe wäre dankbar ... Vielen Dank im Voraus

         <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>
13
Srinivas Guni

Sie benötigen keine anderen Bibliotheken, wie Sie dies mit ScrollView tun können. Sie müssen lediglich die folgenden Requisiten in Ihre Komponente einfügen.

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

In diesem Snack finden Sie weitere Informationen zur Implementierung https://snack.expo.io/H1CnjIeDb

22
Vasil Enchev

Es gibt mehrere Möglichkeiten. Hier sind zwei, die ich ausprobiert habe und gut funktioniert. Ich ziehe die zweite vor, weil, wie das Dokument sagt, "wie bei ListView Hunderte von Seiten ohne Leistungsproblem gerendert werden können".

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

Verwenden Sie die pagingEnabled-Eigenschaft in 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