嗨,我正在努力实现scrollview次快速中锋

Check This Gif

但无法做到这一点.下面是我实现这一点的react-native 代码.

或者有什么方法可以滚动到特定的scrollview元素索引,比如android?

任何帮助都将不胜感激.

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

推荐答案

你不需要其他库,你可以用ScrollView来实现.您只需在组件中添加以下props .

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

查看此小吃,了解有关如何实施它的更多详细信息

React-native相关问答推荐

没有给出相同价值观的时刻

React Native 在每个页面加载时调用数据库

嵌套的FlatList内的Incorrect Padding

@react-native-community/cli-platform-ios/native_modules' 来自哪里?

构建 iOS Expo 应用时出现 React-Native xcodebuild 错误 65

无法执行 JS 调用:__fbBatchedBridge 未定义

react-native-firebase crashlytics 未显示在 firebase 仪表板上

如何通过 node ID 获取真实元素?

错误:看起来您在另一个中嵌套了一个NavigationContainer

使用 Hooks 在功能组件中react-navigation 标题

redux-observable Promise 在单元测试中没有得到解决

react-native:如何在离线模式下在模拟器上运行应用程序?

Android 依赖 'com.google.android.gms:play-services-stats' 的编译(16.0.1)和运行时(17.0.0)类路径有不同的版本

react-native fetch() cookie 持久化

如何修复 npm start cannot determine native SDK version错误?

Ipad 上的 React Native - 错误 - could not connect to development server

Native Script 与 react native 和 ionic 框架的区别

React Native Build Error on IOS - typedef 用不同类型重新定义('uint8_t'(又名'unsigned char')与'enum clockid_t')

react-native:0.41 app.json

如何在react-native中更新数组状态?