Das Einrasten der horizontalen Bildlaufansicht reagiert nativ
Hallo, ich versuche, scrollview zu erreichen Wie unten gif link
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>
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
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".
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>
);
}
}