रिएक्ट-नेटिव एक और वर्चुअलाइज्डलिस्ट-समर्थित कंटेनर

Question

0.61 पर प्रतिक्रिया-मूल में अपग्रेड करने के बाद मुझे इस तरह की बहुत सी चेतावनियाँ मिलती हैं:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

अन्य क्या है VirtualizedList-backed containerजो मुझे उपयोग करना चाहिए, और अब इसे इस तरह उपयोग न करने की सलाह क्यों दी जाती है?

Comments

आपको वास्तव

— वैराग

Answer 1

अगर किसी को अभी भी समस्या के लिए एक सुझाव की तलाश है जो @Ponleu और @ डेविड शिवलिंग ने यहाँ वर्णित किया है (समतल सामग्री के बारे में जो फ्लैटलिस्ट से ऊपर जाती है), तो यह वह तरीका है जो मैंने लिया:

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

उम्मीद है कि यह किसी की मदद करता है। :)

Comments

क्या आप जानते हैं कि यह बेहतर क्यों होना चाहिए, जिस तरह से चेतावनी उत्पन्न होती है?

— डेविड शिलिंग

@DavidSchilling क्योंकि आपने 2 स्क्रॉल कंटेनरों के साथ परिणाम की कोशिश की: ScrollViewऔर FlatList- आपको असंगत स्क्रॉल व्यवहार मिलेगा। इस उत्तर में प्रस्तुत किया गया तरीका केवल 1 स्क्रॉल कंटेनर में है और हैडर / फुटर में आप कितना भी जटिल क्यों न हो, कोई भी दृश्य डाल सकते हैं।

— वैराग

मैं फंक्शन कंपोनेंट का इस्तेमाल कर रहा हूं, और ContentThatGoesAboveTheFlatList को फिर से रेंडर करना पड़ा है। इस पर कोई हल

— पोंलेउ

@Ponleu आप पुन: रेंडरर्स useMemoसे बचने के लिए, React द्वारा प्रदान किए गए हुक का उपयोग करके अपने ContentThatGoesAboveTheFlatList घटक को याद कर सकते हैं । यहाँ अधिक जानकारी: reactjs.org/docs/hooks-reference.html#usememo मुझे बताएं कि क्या यह मददगार है। :)

— अफ़राज हुसैन

Answer 2

बस अगर यह किसी की मदद करता है, तो यह है कि मैंने अपने मामले में त्रुटि कैसे ठीक की।

मेरे FlatListअंदर एक नेस्टेड था ScrollView:

render() {
    return (
        <ScrollView>
            <h1>{'My Title'}</h1>
            <FlatList
                data={this.state.myData}
                renderItem={({ item }) => {
                    return <p>{item.name}</p>;
                }}
            />
            {this.state.loading && <h2>{'Loading...'}</h2>}
        </ScrollView>
    );
}

और मुझे अपनी ज़रूरत की हर चीज़ को रेंडर करने ScrollViewके FlatListलिए उपयोग करने से छुटकारा मिल गया, जो चेतावनी से छुटकारा पा गया:

render() {
    const getHeader = () => {
        return <h1>{'My Title'}</h1>;
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return <h2>{'Loading...'}</h2>;
    };

    return (
        <FlatList
            data={this.state.myData}
            renderItem={({ item }) => {
                return <p>{item.name}</p>;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}

Answer 3

डॉक्स में उदाहरणों को देखकर मैंने कंटेनर बदल दिया है:

<ScrollView>
    <FlatList ... />
</ScrollView>

सेवा:

<SafeAreaView style={{flex: 1}}>
    <FlatList ... />
</SafeAreaView>

और वे सभी चेतावनी गायब हो गई।

Comments

क्या होगा यदि मैं FlatListइनसाइट्स के ऊपर सामग्री प्रस्तुत करता हूं ScrollViewऔर चाहता हूं कि वह सामग्री स्क्रॉल करने योग्य हो?

— पोनलेउ

यह अच्छा उपयोगकर्ता अनुभव नहीं है कि एक के बाद एक दो स्क्रॉल किए गए दृश्य हों। मैं इसे इस तरह से घोंसला बनाने की कोशिश करूंगा: '<दृश्य> <स्क्रॉल दृश्य> <सामग्री /> </ स्क्रॉल दृश्य> <सपाटलिस्ट ... /> </ दृश्य>' (परीक्षण नहीं किया गया)

— वारीग

मुझे पूरा यकीन है कि फ्लैटलिस्ट एक और स्क्रॉल नहीं बनाएगा, जब तक कि हम इसे निर्दिष्ट ऊंचाई के साथ एक कंटेनर में नहीं लपेटते।

— पोनलेउ

मुझे @Ponleu जैसी ही समस्या है। मेरे पास ScrollViewकुछ सामग्री है और फिर FlatListअंदर भी है ScrollView। और मैं चाहता हूं कि पूरी स्क्रीन एक साथ स्क्रॉल करें।

— डेविड शिलिंग

Android में इस मुद्दे को कैसे हल करें ??

— एमडी। IBRAHIM KHALIL TANIM

Answer 4

मेरी राय में मैं फ्लैटलिस्ट के बजाय मानचित्र का उपयोग कर सकता हूं। लेकिन मेरे मामले में मैं बड़ी सूची नहीं दिखाना चाहता था। FlatList का उपयोग नहीं करने से प्रदर्शन समस्या हो सकती है। इसलिए मैंने इसका इस्तेमाल चेतावनी को दबाने के लिए किया। https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

Answer 5

चेतावनी दिखाई देती है क्योंकि ScrollViewऔर FlatListउसी तर्क को साझा करते हैं, अगर FlatListअंदर चलाते हैं ScrollView, तो यह डुप्लिकेट है

वैसे SafeAreaViewमेरे लिए काम नहीं करता है, हल करने का एकमात्र तरीका है

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

त्रुटि गायब हो जाती है

Answer 6

मैंने इसे हल करने के लिए कुछ तरीकों की कोशिश की, जिसमें ListHeaderComponentया भी शामिल है ListFooterComponent, लेकिन यह सब मेरे लिए फिट नहीं था।

लेआउट जिसे मैं प्राप्त करना चाहता था वह इस तरह है, और मैं एक बार में स्क्रॉल करना चाहता था।

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

पहले मैं इस मुद्दे और टिप्पणियों के लिए धन्यवाद कहना चाहता हूं , जिसने मुझे विचारों का गुच्छा दिया।

मैं ListHeaderComponentफ़्लैटलिस्ट के ऊपर की जगहों के बारे में सोच रहा था , लेकिन चूंकि मेरी Flatlistदिशा स्तंभ थी, इसलिए मैं जिस हेडर को रखना चाहता था वह बाईं ओर था Flatlist:(

फिर मुझे VirtualizedList-backedबात पर कोशिश करनी थी । मैंने बस सभी घटकों को पैक करने की कोशिश की VirtualizedList, जहां renderItemsसूचकांक देता है और वहां मैं घटकों को सशर्त रूप से पारित कर सकता हूं renderItems।

मैं इसके साथ काम कर सकता था Flatlist, लेकिन मैंने अभी तक कोशिश नहीं की है।
अंत में ऐसा लग रहा है।

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />  

और निश्चित रूप से पूरी स्क्रीन को स्क्रॉल करने में सक्षम है।

Answer 7

यह समस्या तब आती है जब आप उसी अभिविन्यास के साथ <FlatList />अंदर उपयोग कर रहे होते हैं <ScrollView>।

इसे ठीक करने के लिए, अपने फ्लैटलिस्ट में "क्षैतिज" जोड़ें:

<ScrollView>
    <FlatList **horizontal** ... />
</ScrollView>

नायब: आपका फ़्लैटलिस्ट क्षैतिज रूप से प्रस्तुत किया जाएगा

Comments

आप इस प्रश्न को गलत समझते हैं

— जियोर्गी गविमराज़े