नए आइटम जोड़े जाने पर उल्टे फ़्लैटलिस्ट को नीचे स्क्रॉल करने से रोकें

वोट
45

मैं एक उल्टे का उपयोग करके, एक चैट ऐप बना रहा हूं 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:

IOS में ऑटो स्क्रॉल को रोकने के लिए maintainVigureContentPosition प्रॉप्स का उपयोग करें लेकिन दुर्भाग्य से, यह एंड्रॉइड पर काम नहीं कर रहा है।

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

समाधान 2:

मैं रखें नवीनतम y के साथ ऑफसेट द्वारा एक और वैकल्पिक हल पाया Onscroll और भी बचाने से पहले सामग्री ऊंचाई के साथ नए आइटम जोड़ने के बाद onContentSizeChange और सामग्री ऊंचाई का अंतर की गणना, और नए y नवीनतम करने के लिए ऑफसेट सेट 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