Αποτρέψτε την ανεστραμμένη επίπεδη λίστα από την κύλιση προς τα κάτω κατά την προσθήκη νέων στοιχείων

ψήφοι
41

Δημιουργώ μια εφαρμογή συνομιλίας, χρησιμοποιώντας μια ανεστραμμένη Flatlist . Προσθέτω νέα στοιχεία στην κορυφή της λίστας όταν onEndReached καλείται και όλα λειτουργούν καλά.

Το πρόβλημα είναι ότι εάν προσθέσετε στοιχεία στο κάτω μέρος, μετακινείται αμέσως στο κάτω μέρος της λίστας. Αυτό σημαίνει ότι ο χρήστης πρέπει να κάνει κύλιση προς τα πίσω για να διαβάσει τα μηνύματα που μόλις προστέθηκαν (κάτι που είναι τρομερό).

Προσπάθησα να τηλεφωνήσω scrollToOffset σε onContentSizeChange , αλλά αυτό έχει καθυστέρηση ενός δευτερολέπτου, όπου η κύλιση μετακινείται εμπρός και πίσω.

Πώς μπορώ να έχω τη λίστα να συμπεριφέρεται με τον ίδιο τρόπο όταν προσθέτω στοιχεία στην κορυφή ΚΑΙ στο κάτω μέρος , διατηρώντας τα ίδια μηνύματα στην οθόνη αντί να εμφανίζονται τα νέα;

Δημοσιεύθηκε 26/05/2020 στις 14:44
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
0

Έχετε δοκιμάσει να χρησιμοποιήσετε το keyExtractor; Μπορεί να σας βοηθήσει να αποφύγετε την εκ νέου απόδοση, επομένως δοκιμάστε να χρησιμοποιήσετε μοναδικά κλειδιά για κάθε στοιχείο. μπορείτε να διαβάσετε περισσότερα γι 'αυτό εδώ: https://reactnative.dev/docs/flatlist#keyextractor

Απαντήθηκε 26/05/2020 στις 18:35
πηγή χρήστη

ψήφοι
0

εδώ είναι η επίδειξη: https://snack.expo.io/@nomi9995/flatlisttest

Λύση 1:

Χρησιμοποιήστε τα στηρίγματα maintainVisibleContentPosition για να αποτρέψετε την αυτόματη κύλιση στο IOS, αλλά δυστυχώς, δεν λειτουργεί στο Android.

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

Λύση 2:

Βρήκα μια άλλη λύση διατηρώντας την τελευταία μετατόπιση y με το onScroll και επίσης αποθηκεύοντας το ύψος περιεχομένου πριν και μετά την προσθήκη νέων στοιχείων με το onContentSizeChange και υπολογίζω τη διαφορά ύψους περιεχομένου και έθεσα νέα μετατόπιση y στην τελευταία διαφορά ύψους περιεχομένου μετατόπισης!

Απαντήθηκε 28/05/2020 στις 15:36
πηγή χρήστη

ψήφοι
0

Εδώ προσθέτω ένα νέο στοιχείο πάνω και κάτω σε μια ανεστραμμένη επίπεδη λίστα .

εισάγετε την περιγραφή της εικόνας εδώ

Ελπίζω να μπορείτε να συγκρίνετε τις απαιτήσεις σας με τον παρεχόμενο δείγμα κώδικα :)

Πλήρης κωδικός:

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,
  },
});
Απαντήθηκε 30/05/2020 στις 14:55
πηγή χρήστη

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