Vraag Reactieve Android ScrollView-scrollTo werkt niet


Ik probeer een te gebruiken horizontale ScrollView in React Native voor Android, waarbij de startpositie in het midden van de schuivende afbeeldingen staat in plaats van (0,0).

De scrollTo methode lijkt correct binnenin te worden genoemd componentDidMount maar er beweegt niets in de toepassing, dit wordt nog steeds weergegeven als het begin van de schuif helemaal naar links.

Aangezien dit Android is, heb ik geen toegang tot contentOffset-rekwisieten of zou ik dat rechtstreeks instellen, volgens de documentatie. Hier is de 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;

15
2017-10-19 07:04


oorsprong


antwoorden:


Ik kom hetzelfde probleem tegen, en verspil er een paar uur aan: 1 in android, scrollview kan alleen scrollen als de grootte <content's size 2 in native native Android, als je scrollView.scrollTo () aanroept in componentDidMount, zal het niet werken, want scrollview heeft een lay-outanimatie wanneer je maakt, je kunt het vinden 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());
}

dus je moet het na de animatie uitstellen

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

30
2018-01-06 03:46



Dit werkt op React Native 0.44.0. Bedankt voor de hint @ Eldelshell. Het lijkt ook te werken met elke time-outwaarde. Tenminste op de emulator. Ik vond dat het antwoord met betrekking tot InteractionManager.runAfterInteractions heeft niets gedaan om het probleem op te lossen, maar misschien is dat een verschil in versies.

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

8
2018-05-28 18:47