Phản ứng cuộn Android ScrollView gốc Để không hoạt động

Question

Tôi đang cố sử dụng ScrollView ngang trong React Native cho Android, vị trí bắt đầu ở giữa hình ảnh cuộn thay vì (0,0).

Phương thức scrollTo dường như được gọi chính xác bên trong componentDidMount nhưng không có gì di chuyển trong ứng dụng, nó vẫn hiển thị khi bắt đầu cuộn tất cả các con đường sang trái.

Vì đây là Android, tôi không có quyền truy cập vào các đạo cụ contentOffset hoặc tôi sẽ đặt trực tiếp, theo tài liệu. Đây là mã:

'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

tôi gặp cùng một vấn đề, và chất thải vài giờ trong nó: 1 trong android, scrollview có thể di chuyển chỉ khi kích thước < nội dung kích thước 2 của nó trong phản ứng android bản xứ, nếu bạn gọi scrollView.scrollTo() trong componentDidMount, nó sẽ không làm việc, becaus scrollview có một hình ảnh động bố trí khi tạo, bạn có thể tìm thấy nó trong 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()); 
} 

vậy, bạn phải trì hoãn nó sau khi hình ảnh động

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

Answer 2

Tính năng này hoạt động trên React Native 0.44.0. Cảm ơn gợi ý @Eldelshell. Nó cũng có vẻ làm việc với bất kỳ giá trị timeout nào. Ít nhất là trên trình mô phỏng. Tôi thấy rằng câu trả lời liên quan đến InteractionManager.runAfterInteractions không có gì để khắc phục vấn đề nhưng có lẽ đó là sự khác biệt trong các phiên bản.

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