Yeni öğeler eklendiğinde ters Düz Listenin aşağıya kaymasını önleyin

oy
45

Ters çevrilmiş kullanarak bir sohbet uygulaması oluşturuyorum Flatlist . Listenin en üstüne yeni öğeler eklediğimde onEndReached denir ve her şey yolunda gider.

Sorun, öğenin altına eklenirse, anında listenin altına kaydırmasıdır. Bu, kullanıcının yeni eklenen (korkunç) mesajları okumak için yukarı kaydırması gerektiği anlamına gelir.

aramayı denedim scrollToOffset içinde onContentSizeChange , ancak kaydırmanın ileri geri atladığı bir saniyelik gecikme vardır.

Yeni mesajları göstermek yerine aynı mesajları ekranda tutarak, üste ve alta öğeler eklediğimde listenin aynı şekilde davranmasını nasıl sağlayabilirim?

Oluştur 26/05/2020 saat 14:44
kaynak kullanıcı
Diğer dillerde...                            


3 cevaplar

oy
0

KeyExtractor'ı kullanmayı denediniz mi? Yeniden oluşturmayı önlemeye yardımcı olabilir, bu nedenle her öğe için benzersiz anahtarlar kullanmayı deneyin. buradan daha fazla bilgi edinebilirsiniz: https://reactnative.dev/docs/flatlist#keyextractor

Cevap 26/05/2020 saat 18:35
kaynak kullanıcı

oy
0

demo: https://snack.expo.io/@nomi9995/flatlisttest

Çözüm 1:

Kullanım maintainVisibleContentPosition IOS otomatik kaydırma önlenmesi ancak ne yazık ki, robot üzerinde çalışmıyor için destek oluşturur.

<FlatList
  ref={(ref) => { this.chatFlatList = ref; }}
  style={styles.flatList}
  data={this.state.items}
  renderItem={this._renderItem}
  maintainVisibleContentPosition={{
     minIndexForVisible: 0,
  }}
/>

Çözüm 2:

Birlikte ofset tutmak son y tarafından başka bir çözüm buldum onScroll ve ayrıca daha önce içerik yüksekliğe tasarrufu ve yeni ürün ekledikten sonra onContentSizeChange ve içerik yüksekliğinin farkı hesaplamak ve en son ofset belirlenen yeni y y içerik yükseklik farkı ofset!

Cevap 28/05/2020 saat 15:36
kaynak kullanıcı

oy
0

Burada ters bir Flatlist'in üstüne ve altına yeni bir öğe ekliyorum .

resim açıklamasını buraya girin

Umarım ihtiyaçlarınızı sağlanan örnek kodla karşılaştırabilirsiniz :)

Tam Kod:

import React, {useState, createRef} from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  Button,
  Platform,
  UIManager,
} from 'react-native';

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

const getRandomColor = () => {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

const DATA = [
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
];

function Item({item}) {
  return (
    <View style={[styles.item, {backgroundColor: item}]}>
      <Text style={styles.title}>{item}</Text>
    </View>
  );
}

let scrollValue = 0;
let itemHeight = 100;

export default function App() {
  const [data, setData] = useState(DATA);
  let flatList = createRef();

  const addItem = (top) => {
    let newData;
    if (top) {
      newData = [...data, getRandomColor()];
      setData(newData);
    } else {
      newData = [getRandomColor(), ...data];
      setData(newData);
      if (scrollValue > itemHeight) {
        flatList.current.scrollToOffset({
          offset: scrollValue + itemHeight,
          animated: false,
        });
      }
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Button title="ADD ON TOP" onPress={() => addItem(true)} />
      <FlatList
        ref={flatList}
        data={data}
        renderItem={({item}) => <Item item={item} />}
        keyExtractor={(item) => item}
        inverted
        onScroll={(e) => {
          scrollValue = e.nativeEvent.contentOffset.y;
        }}
      />
      <Button title="ADD ON BOTTOM" onPress={() => addItem(false)} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    height: itemHeight,
  },
  title: {
    fontSize: 32,
  },
});
Cevap 30/05/2020 saat 14:55
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more