FlatList (ve ScrollView) 'da kaydırma konumunu kilitleme

Question

Geçerli kaydırma konumunu kilitli tutan ve listenin en üstüne eklenen yeni öğeler tarafından değişmeyen bir FlatList oluşturmaya çalışıyorum.

Niyetimi göstermek için bir expo snack oluşturdum.

Atıştırmalık, yeşil öğelerle birlikte bir ScrollView ve sonunda siyah bir öğe sunar. Uygulama başlatıldığında, listenin en altına gider. Beş saniye sonra, üstte 10 öğe eklenir ve kaydırma konumu, bu öğelerin toplam boyutuna göre değişir.

Bu

expo atıştırma kod: Ben anlam kilitli kaydırma konumunu korumak isteyen

import React, { Component } from 'react'; 
import { View, FlatList } from 'react-native'; 

const renderItem = ({ item }) => { 
    let backgroundColor; 
    if (item == 10) { 
    backgroundColor = "black" 
    } 
    else { 
    backgroundColor = item % 2 == 0 ? 'green' : 'blue' 
    } 

    return (
    <View 
     style={{ 
     width: 200, 
     height: 50, 
     backgroundColor, 
     margin: 10, 
     }} 
    /> 
); 
}; 

const MyList = class extends Component { 
    componentDidMount() { 
    setTimeout(() => this.ref.scrollToEnd({ animated: false }), 500); 
    } 
    render() { 
    return (
     <FlatList 
     ref={r => this.ref = r} 
     data={this.props.data} 
     renderItem={this.props.renderItem} 
     /> 
    ); 
    } 
}; 

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     items: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 10], 
    }; 
    } 

    componentDidMount() { 
    const items = [...this.state.items]; 
    items.unshift(1, 1, 1, 1, 1, 1, 1, 1, 1, 1); 
    setTimeout(() => this.setState({ items }), 5000); 
    } 

    render() { 
    return <MyList renderItem={renderItem} data={this.state.items} />; 
    } 
} 

- ürün kaydırma tavrının değişmeyeceğini yerleştirilir (veya en azından bir şekilde kullanıcı herhangi bir şey bilmiyordu)

Geçerli FlatList ve ScrollView API'siyle bunu yapmanın bir yolu var mı? Bu özelliği elde etmek için ne yapılması gerekiyor?

Answer 1

keyExtractor numaralı telefonu kullanmayı denediniz mi? (https://facebook.github.io/react-native/releases/next/docs/flatlist.html#keyextractor).

Yeniden oluşturulmasını önlemek yardımcı olabilir, bu nedenle her öğe için benzersiz anahtarlar kullanmayı deneyin.