如何获取ScrollView元素的位置？

问题描述

我正在制作1个包含按钮的Scrollview，这些按钮来自平面列表，我想根据其位置为每个按钮赋予不同的样式，例如第一个按钮需要不透明度0.2,2nd到0.5等，我有带有一个显示5个按钮的高度的滚动视图，当我们向下滚动时，现在将成为第二个按钮的第三个按钮需要更改样式并使用第二个按钮的样式。 我需要一种方法来获取所有按钮的位置，但是对我来说，这都是相同的。

这是ScrollView的代码：

 <ScrollView scrollEventThrottle={16} style={styles.ageScroll}>
              <View style={styles.ageBtnContainer}>
                <FlatList
                  style={styles.listView}
                  data={STATIC_LIST}
                  renderItem={this.renderAge}
                  ListFooterComponent={() => (
                    <View style={styles.bottomSpacing} />
                  )}
                  showsverticalScrollIndicator={false}
                  keyExtractor={item => item.id}
                />
              </View>
            </ScrollView>

这是渲染年龄的代码：

 renderAge = ({item,index}) => {
        return (
      <View
        onLayout={event => {
          this.find_dimesions(event.nativeEvent.layout);
        }}>
        {/* <View
        onLayout={event => {
          this.handleLayoutChange(event);
        }}
        ref={view => {
          this.ScrollBtn = view;
        }}> */}
        <TouchableOpacity
          onPress={() => {
            console.log(index);
          }}>
          <Text style={styles.AgeBtnText}>{item.name}</Text>
        </TouchableOpacity>
      </View>
    );
  };

这是查找尺寸的代码：

find_dimesions(layout) {
    const {x,y,width,height} = layout;
    console.warn('this is x: ',x);
    console.warn('this is height:',height);
  }

这是控制台的输出：

 WARN  this is x:  0
 WARN  this is height: 60
 WARN  this is x:  0
 WARN  this is height: 60
 WARN  this is x:  0
 WARN  this is height: 60
 WARN  this is x:  0
 WARN  this is height: 60
 WARN  this is x:  0
 WARN  this is height: 60
 WARN  this is x:  0
 WARN  this is height: 60
 WARN  this is x:  0
 WARN  this is height: 60

ScrollView的Height为289，所有按钮的高度为50＆margindon：10，我需要0,60,120,180之类的位置。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）