নেটিভ প্রতিক্রিয়া করুন - অন্য ভার্চুয়ালাইজডলিস্ট-ব্যাকড ধারক

Question

দেশীয় ০..6১ তে প্রতিক্রিয়া জানাতে আপগ্রেড করার পরে আমি এরকম প্রচুর সতর্কতা পাই:

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

VirtualizedList-backed containerআমার অন্যটি কী ব্যবহার করা উচিত এবং কেন এখন সেভাবে ব্যবহার না করার পরামর্শ দেওয়া হচ্ছে?

Comments

আপনার সত্যই কিছু কোড দেখা উচিত

— Variag

Answer 1

@ পোনলেউ এবং @ ডেভিড শিলিং এখানে (ফ্ল্যাটলিস্টের উপরে যে সামগ্রীগুলি নিয়েছে) সম্পর্কে এখানে বর্ণনা করেছেন এমন সমস্যার বিষয়ে যদি কেউ এখনও পরামর্শের সন্ধান করছেন তবে আমি এই পদ্ধতিটি গ্রহণ করেছি:

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

আপনি এখানে এ সম্পর্কে আরও পড়তে পারেন: https://facebook.github.io/react-native/docs/flatlist#listheadercomp घटक

আশা করি এটি কাউকে সাহায্য করবে। :)

Comments

আপনি কি জানেন যে কেন সতর্কবার্তাটি উত্পন্ন হওয়ার পরে এটি আরও ভাল হওয়া উচিত?

— ডেভিড শিলিং

@ ডেভিডশিলিং কারণ আপনি যেভাবে 2 স্ক্রোল ধারক নিয়ে ফলাফল চেষ্টা করেছেন: ScrollViewএবং FlatList- আপনি বেমানান স্ক্রোল আচরণ পাবেন। এই উত্তরটিতে উপস্থাপিত উপায়ে কেবল 1 টি স্ক্রোল ধারক এবং শিরোলেখ / পাদচরণে আপনি যে কোনও জটিলতা নির্বিশেষে কোনও মতামত রাখতে পারেন।

— ভারিগ

আমি ফাংশন উপাদান ব্যবহার করছি, এবং ContentThatGoesAboveTheFlatList পুনরায় রেন্ডার ইস্যু পেয়েছি।

— এটির যে

@ পনলেউ আপনি পুনরায় রেন্ডারগুলি useMemoএড়াতে রিঅ্যাক্ট দ্বারা সরবরাহিত হুক ব্যবহার করে আপনার কন্টেন্টট্যাটটগোজ এফ্ল্যাভলিস্ট উপাদানটিকে স্মরণ করতে পারেন । এখানে আরও তথ্য: reactjs.org/docs/hooks-references.html#usememo এটি সহায়ক হলে আমাকে দিন Let :)

— আফরাজ হুসেন

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এবং চান স্ক্রোলযোগ্য হতে যে সামগ্রী?

— পোনলেউ

একের পরের দুটি স্ক্রোলযোগ্য ভিউ থাকা ভাল ব্যবহারকারীর অভিজ্ঞতা নয়। আমি এটির মতো বাসা নেওয়ার চেষ্টা করব: '<ভিউ << স্ক্রোলভিউ << সামগ্রী /> << স্ক্রোলভিউ <ফ্ল্যাটলিস্ট ... /> << ভিউ>' (পরীক্ষিত নয়)

— ভারিগ

আমি নিশ্চিত যে ফ্ল্যাটলিস্টটি অন্য একটি স্ক্রোল তৈরি করবে না, যদি না আমরা এটিকে নির্দিষ্ট উচ্চতার সাথে একটি ধারককে একপাশে আবদ্ধ করি।

— পোনলেউ

@ পনলেউয়ের মতো আমারও একই সমস্যা আছে। আমি একটি আছে ScrollViewযে কিছু বিষয়বস্তুর ভিতরে এবং তারপর একটি FlatListএছাড়াও ভিতরে ScrollView। এবং আমি পুরো স্ক্রিনটি একসাথে স্ক্রোল করতে চাই।

— ডেভিড শিলিং

অ্যান্ড্রয়েডে এই সমস্যাটি কীভাবে সমাধান করবেন ??

— এমডি ইব্রাহিম খলিল তানিম

Answer 4

আমার মতে আমি ফ্ল্যাটলিস্টের পরিবর্তে মানচিত্র ব্যবহার করতে পারি। তবে আমার ক্ষেত্রে আমি বড় তালিকা প্রদর্শন করতে চাই না। ফ্ল্যাটলিস্ট ব্যবহার না করা পারফরম্যান্স সমস্যার কারণ হতে পারে। তাই আমি সতর্কতা দমন করতে এটি ব্যবহার করেছি 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>

প্রথমে আমি এই ইস্যু এবং মন্তব্যে ধন্যবাদ বলতে চাই , যা আমাকে অনেকগুলি ধারণা দিয়েছে gave

আমি 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

আপনি প্রশ্নটি ভুল বুঝেছেন

— জিওরগি জিভিমাদজে