Question

我正在Scrollview上使用分页。我有一个元素占屏幕大小的1/4。因此，当元素数大于4时，滚动会进入。问题是元素数是否为（4n + 1）形式，即5,9,13 ...当我将滚动条移到最后时，滚动视图会回退元件。在gif中就像这样。

我尝试了snapToStart = {false} snapToEnd = {false}。但它不起作用。如何解决这个问题

renderSpacesCol () {
   var col = []
   this.state.data.map(something => {
      col.push(
        <Col style={styles.containerColSpaces}>
         <Element data={something.someData}/>
        </Col>
      )
   })
   return col
}

render () {
    return ( 
      <View style={styles.containerScrollViewSpaces}>
        <ScrollView contentContainerStyle={styles.containerScrollView} horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} snapToStart={false}>
          <Grid>
            <Row style={styles.containerRowSpace}>
            {
              this.renderSpacesCol()
            }
            </Row>
          </Grid>
        </ScrollView>
      </View>
    )
}

const styles = StyleSheet.create({
  containerColSpace: {
    flex: 0,
    width: screenWidth/4,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  containerRowSpace: {
    flex: 0,
    height: 100,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
containerScrollViewSpaces: {
    flex: 0,
    height: 100,
    justifyContent: 'flex-start',
    alignItems: 'flex-start'
  },
  containerScrollView: {
    flexGrow: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
})

。

Answer 1

问题是由pagingEnabled道具引起的。

为true时，滚动视图会在滚动视图的倍数处停止滚动时的大小。可以用于水平分页。

我已经在Snake.expo上创建了一个演示，您可以在有和没有pagingEnabled的情况下查看ScrollView的行为。

演示：

https://snack.expo.io/SyVC2aNAS

ScrollView正在回弹吗？

1 个答案: