react native - scrolling - Reaccionar nativo de Android ScrollView scrollTo no funciona

scrollview inside scrollview react native

Question

Estoy tratando de usar un ScrollView horizontal en React Native para Android, donde la posición inicial está en el medio de las imágenes en desplazamiento en lugar de (0,0).

El método scrollTo parece ser llamado correctamente dentro de componentDidMount pero no se mueve nada en la aplicación, todavía se muestra como el inicio del desplazamiento hacia la izquierda.

Como se trata de Android, no tengo acceso a las propiedades contentOffset o lo establecería directamente, de acuerdo con la documentación. Aquí está el código:

''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;

Answer 1

Esto funciona en React Native 0.44.0. Gracias por la pista @Eldelshell. También parece funcionar con cualquier valor de tiempo de espera. Al menos en el emulador. Encontré que la respuesta con InteractionManager.runAfterInteractions no solucionó el problema, pero tal vez haya una diferencia en las versiones.

componentDidMount() {
  setTimeout(() => {
    this._scroll.scrollTo({y: 100})
  }, 1)
}

Answer 2

Quería evitar el uso de demoras y temporizadores, por lo que, después de un poco de excavación, descubrí que el uso de onLayout funciona muy bien:

scrollToInitialPosition = () => {
  this.scrollViewRef.scrollTo({ y: 100 });
}
...
<ScrollView
  ref={(ref) => { this.scrollViewRef = ref; }}
  onLayout={this.scrollToInitialPosition}
/>

Answer 3

Tuve el mismo problema, y ​​desperdicié varias horas sin él:

• 1: en Android, ScrollView puede desplazarse solo cuando su tamaño <tamaño de contenido

• 2: en reaccionar con Android nativo, si llama a ScrollView.scrollTo () en componentDidMount, no funcionará, porque ScrollView tiene una animación de diseño al crear, puede encontrarlo en 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());
}

Por lo tanto, debe retrasarlo después de la animación.

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