react-native – React原生Android ScrollView scrollTo无法正常工作

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

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

由于这是Android,我没有访问contentOffset道具或我会直接设置,根据文档.这是代码:

'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;
最佳答案
我有同样的问题,浪费了几个小时没有它:

> 1:在android中,ScrollView只能在其大小<内容的大小
> 2:在本机android中,如果你在componentDidMount中调用ScrollView.scrollTo(),它将无法工作,因为ScrollView在创建时有一个布局动画,你可以在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());
}

所以,你必须在动画后延迟它

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

转载注明原文:react-native – React原生Android ScrollView scrollTo无法正常工作 - 代码日志