反应原生 Android ScrollView scrollTo 不起作用 [英] React native Android ScrollView scrollTo not working

问题描述

我正在尝试为 Android 使用 React Native 中的水平 ScrollView，其中起始位置位于滚动图像的中间而不是 (0,0).

I am trying to use a horizontal ScrollView in React Native for Android, where the starting position is in the middle of the scrolling images rather than (0,0).

scrollTo 方法似乎在 componentDidMount 内被正确调用，但应用程序中没有任何移动，它仍然显示为一直向左滚动.

The scrollTo method seems to be called correctly inside componentDidMount but nothing moves in the application, it still shows as starting the scroll all the way to the left.

由于这是 Android，我无法访问 contentOffset 道具，或者我会根据文档直接设置.代码如下:

Since this is Android I don't have access to contentOffset props or I would set that directly, according to the documentation. Here is the code:

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Component,
} = React;
var precomputeStyle = require('precomputeStyle');

class Carousel extends Component {
  constructor(props, context) {
    super(props, context);
    //this.changeContent = this.changeContent.bind(this);
  }

  componentDidMount() {
    this.myScroll.scrollTo(100);
    console.log("called DidMount");
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <ScrollView ref={(ref) => this.myScroll = ref}
          contentContainerStyle={styles.container}
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          bounces={true}
          onMomentumScrollEnd={this.onAnimationEnd}
        >
          {this.props.children}
        </ScrollView>
      </View>
    );
  }

  onAnimationEnd(e) {
    console.log("curr offset: " + e.nativeEvent.contentOffset.x);
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  page: {
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
  },
});

module.exports = Carousel;

推荐答案

我遇到了同样的问题，浪费了几个小时没有它:

I had the same issue, and wasted several hours no it:

• 1:在android中，ScrollView只有在其尺寸小于时才能滚动.内容的大小

• 1: in android, ScrollView can scroll only when its size < content's size

2:在react native android中，如果在componentDidMount中调用ScrollView.scrollTo()是不行的，因为ScrollView在创建时有布局动画，可以在ReactScrollView.java中找到

2: in react native android, if you call ScrollView.scrollTo() in componentDidMount, it won't work, because ScrollView has a layout animation when create, you can find it in ReactScrollView.java

protected void onLayout(boolean changed, int l, int t, int r, int b) {
    // Call with the present values in order to re-layout if necessary
    scrollTo(getScrollX(), getScrollY());
}

所以，你必须在动画之后延迟

so, you must delay it after the animation

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.myScroll.scrollTo(100);
        console.log("called DidMount");
    })  
}

这篇关于反应原生 Android ScrollView scrollTo 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！