Question

我正在创建一个水平ScrollView导航栏，需要将所选元素放在中心位置。有没有办法可以获得所选项目onPress的位置偏移量。这是我正在使用的代码。 touchableOpacity的onPress应该得到元素的位置偏移量。 onLayout不会在这里工作，因为它只会在布局更改时触发事件。任何帮助，将不胜感激。

render() {
    return (<View style={styles.footerCtr}>
      <ScrollView ref="categoryScrollView" horizontal showsHorizontalScrollIndicator={false}>
        {this.props.categories.map((cat, index) => {
          const catIndex = index;
          const catName = cat.nativename;

          return (
            <View style={catIndex === this.state.selCatIndex ? [styles.catCtr, styles.catSelected] : styles.catCtr} key={catIndex}>
              <TouchableOpacity onPress={this.changeCategory.bind(this, catIndex)}>
                <Text style={catIndex === this.state.selCatIndex ? [styles.category, styles.catSelText] : styles.category}
                >{capitalize(catName)}</Text>
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
    </View>);
  }

Answer 1

有两种方法可以做到这一点。

对每个元素使用onLayout。并存储onLayout在状态中给出的x和y坐标。还可以使用onScroll侦听器来存储当前滚动位置。现在在onPress处理程序onPress中，根据设备尺寸和当前滚动位置计算调整后的x坐标以将其带到中心。然后使用ScrollView的scrollTo方法滚动到该位置 https://facebook.github.io/react-native/docs/scrollview.html#methods
OnPress事件的NativeEvent字段还提供触摸事件的x和y坐标。您的onPress事件必须接受该事件作为参数。您可以再次计算调整后的x坐标，以根据设备尺寸和当前滚动位置将其调整到中心。然后使用ScrollView的scrollTo方法滚动到该位置。

但是NativeEvent只会给出触摸事件的坐标。而不是元素的开始。您很可能必须使用第一种方法。

ScrollView子元素获得偏移量

1 个答案: