Question

您好我正试图实现scrollview对齐如下面gif链接

但无法这样做。以下是我的反应原生代码来实现这一点。

还是有任何方法可以滚动到像android这样的scrollview元素的特定索引吗？

任何帮助将不胜感激。提前致谢

         <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>

Answer 1

您不需要使用ScrollView可以执行其他库。您只需在组件中添加以下道具即可。

>>> '{0: <8}|'.format(myfloat)
'0.002   |'

检查这个零食，了解如何实施它的更多细节 https://snack.expo.io/H1CnjIeDb

Answer 2

有几种选择。这是我尝试过的两个并且工作正常。我更喜欢第二个，因为它的文档说“像ListView，这可以渲染数百页而不会出现性能问题”。

Answer 3

使用public void refreshAdapter (ArrayList<model> models){ modelArrayList = models; notifyDataSetChanged(); }中的pagingEnabled属性。

ScrollView

Answer 4

如果由于长列表未对齐而不想使用snapToInterval，则可以使用更精确的snapToOffsets。

例如：

const { width } = Dimensions.get('window');
this.IMAGE_WIDTH = width * (1 / 2.5)
this.image_margin = 5
this.nishhar = width - ((this.IMAGE_WIDTH + this.image_margin) * 2 + this.image_margin * 2)

dataNum = [1, 2, 3, 4, 5, 6]

return (<FlatList
            data={dataNum}
            renderItem={item => {
                return (
                    <View style={{
                        backgroundColor: item.index % 2 == 0 ? 'red' : 'blue',
                        width: this.IMAGE_WIDTH,
                        height: this.IMAGE_WIDTH,
                        marginLeft: this.image_margin,
                        marginRight: this.image_margin,
                    }}>
                    </View>)
            }}
            keyExtractor={this.keyGenerator}
            horizontal={true}
            snapToAlignment={"start"}
            snapToOffsets={[...Array(dataNum.length)].map((x, i) => (i * (this.IMAGE_WIDTH + 2 * this.image_margin) - (this.nishhar * 0.5)))}
            decelerationRate={"fast"}
            pagingEnabled
        />)

，或者您也可以签出以下示例： https://snack.expo.io/SyWXFqDAB

水平scrollview捕捉反应原生

4 个答案: