Chế độ xem danh sách phản hồi gốc: Mục đăng ký trước

Question

Có thể thêm các mục vào Chế độ xem danh sách gốc của React trên sự kiện onTopReached tương tự như cách nối thêm các mục vào sự kiện onEndReached không? Hiện tại, khi tôi thêm hàng vào danh sách, cuộn danh sách ListView cuộn lên trên cùng.

Trường hợp sử dụng: Tôi có một ứng dụng có nguồn cấp dữ liệu mà người dùng có thể cuộn xuống. Khi điều hướng khỏi nguồn cấp dữ liệu và sau đó quay lại nó, tôi muốn hiển thị hàng nhìn thấy cuối cùng ở trên cùng. Sau đó, người dùng có thể cuộn lên để xem các hàng trước mà cô/anh ấy đã cuộn qua và dĩ nhiên là xuống để tải các hàng mới. Giả sử tôi đã khiến cho ListView bắt đầu từ hàng nhìn thấy lần cuối một ví dụ contrived sẽ giống như thế này:

_onTopReached() { 
    this._unshiftRows(); 
    }, 

    _unshiftRows() { 
    var list = this.props.list; // The entire list 
    var lastSeenRowIndex = this.props.lastSeenRowIndex; 
    var prevRows = list.slice(0, i); 
    this._rows = prevRows.concat(this._rows); 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this._rows) 
    }); 
    }, 

Trong ví dụ trên tôi chỉ thêm vào trước phần đầu tiên của danh sách để cuối cùng đã trả lại một phần với số _onTopReached kích hoạt ngay vì tôi đã ở trên cùng. Tuy nhiên, điều này làm cho ListView trở lại với hàng đầu tiên ở phía trên cùng của màn hình thay vì duy trì vị trí trước đó.

Cách khác là lưu trữ bù đắp y của hàng được xem lần cuối và điều hướng quay lại cuộn Chế độ xem danh sách đến vị trí đó. Tuy nhiên, phương thức đó yêu cầu mọi hàng trước hàng hiện tại để hiển thị tốn thời gian. Tôi cũng không thể có được độ lệch chính xác với scrollWithoutAnimationTo hoặc bằng cách đặt contentOffSet. Tuy nhiên nó di chuyển đến vị trí chính xác nếu tôi sử dụng scrollTo hoặc đặt thời gian chờ trước khi gọi scrollWithoutAnimationTo và cho phép các hàng đầu tiên hiển thị trong thời gian trung bình. Nhưng đó không phải là rất tốt đẹp.

Tất cả trợ giúp sẽ được đánh giá cao. Cảm ơn!

Answer 1

Bạn nên sử dụng FlatList

Thử thêm các mục mới vào nguồn dữ liệu và sử dụng phương pháp 'scrolltoindex'.

FlatList

scrollToIndex (params: đối tượng) Scrolls đến mục tại chỉ số quy định như vậy mà nó được đặt trong khu vực có thể xem như đó viewPosition 0 địa điểm nó ở phía trên, 1 ở phía dưới, và 0,5 tập trung ở giữa. viewOffset là số lượng pixel cố định để bù đắp vị trí mục tiêu cuối cùng.