React Native Scrollview 问题（跟踪整页滚动位置）

Question

我有一个滚动视图，其中包含一张覆盖整个屏幕的图像。屏幕底部有两个按钮，可让您下载或将图像设置为墙纸。我遇到的问题是，当单击按钮时，我不知道在水平滚动视图中查看的是哪个图像。

我知道屏幕尺寸，并假设我是否可以从视图中当前查看的图像除以屏幕尺寸得到内容偏移量或类似的东西可以让我知道数组中的图像我'我正在研究如何执行其余功能。

不幸的是，我不知道如何完成下面的代码以提供一些上下文。

        <ScrollView 
          horizontal
          decelerationRate={0}
          snapToInterval={width}
          snapToAlignment={"center"}
          style={{ height: height }}
        >
          {
            availibleBackgrounds.map(element => (
              <Image
                style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
                source={{
                  uri: element
                }}
              />
            ))
          }
        </ScrollView>

提前致谢，克里斯

Answer 1

您需要获取内容的偏移量，您可以通过在 ScrollView 中添加以下属性来实现：

onMomentumScrollEnd={event => setSelectedIndex(event.nativeEvent.contentOffset.x/width)}

setSelectedIndex 是您应该创建的函数。

Answer 2

为了进一步结束这个问题，我做了以下工作

  calculateCurrentIndex(position) {
    this.setState({ 
      selectedIndex: {
        current: Math.ceil((position / width).toFixed(2)),
      } 
    });
  }

----------------------------------------

        <ScrollView 
          horizontal
          decelerationRate={0}
          snapToInterval={width}
          snapToAlignment={"center"}
          style={{ height: height }}
          onMomentumScrollEnd={event => this.calculateCurrentIndex(event.nativeEvent.contentOffset.x)}
          showsHorizontalScrollIndicator={false}
        >
          {
            availibleBackgrounds.map((element, index) => (
              <Image
                key={index}
                style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
                source={{
                  uri: element
                }}
              />
            ))
          }
        </ScrollView>

React Native Scrollview 问题（跟踪整页滚动位置）

React Native Scroll View Question (keep track of full page scroll loaction)

javascript

scrollview

reactjs

react-native

react-native-android