React-Native một container khác được hỗ trợ VirtualizedList

Sau khi nâng cấp lên phản ứng gốc 0,61 tôi nhận được rất nhiều cảnh báo như thế:

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

Cái gì khác VirtualizedList-backed containermà tôi nên sử dụng, và tại sao bây giờ lại khuyên không nên sử dụng như vậy?

Nếu ai đó vẫn đang tìm kiếm một đề xuất cho vấn đề mà @Ponleu và @David Schilling đã mô tả ở đây (liên quan đến nội dung vượt trên FlatList), thì đây là cách tiếp cận tôi đã thực hiện:

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

Bạn có thể đọc thêm về điều này tại đây: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Hy vọng nó sẽ giúp được ai đó. :)

Chỉ trong trường hợp điều này giúp được ai đó, đây là cách tôi sửa lỗi trong trường hợp của mình.

Tôi đã có một FlatListlồng bên trong một 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>
    );
}

và tôi đã thoát khỏi ScrollViewbằng cách sử dụng FlatListđể kết xuất mọi thứ tôi cần, loại bỏ cảnh báo:

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}
        />
    );
}

Nhìn vào các ví dụ trong tài liệu tôi đã thay đổi container từ:

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

đến:

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

và tất cả những cảnh báo đó đã biến mất

Theo tôi tôi có thể sử dụng bản đồ thay vì FlatList. Nhưng trong trường hợp của tôi, tôi sẽ không hiển thị danh sách lớn. Không sử dụng FlatList có thể gây ra vấn đề hiệu suất. vì vậy tôi đã sử dụng điều này để chặn cảnh báo https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

Cảnh báo xuất hiện bởi vì ScrollViewvà FlatListchia sẻ cùng một logic, nếu FlatListchạy bên trong ScrollView, nó sẽ bị trùng lặp

Bằng cách SafeAreaViewnày không hiệu quả với tôi, cách duy nhất để giải quyết là

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

Lỗi biến mất

Tôi đã thử một số cách để giải quyết vấn đề này, bao gồm ListHeaderComponenthoặc ListFooterComponent, nhưng tất cả đều không phù hợp với tôi.

bố cục tôi muốn đạt được là như thế này và tôi muốn được cuộn vào một lần.

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

Trước tiên tôi muốn nói lời cảm ơn tới này vấn đề và ý kiến, trong đó đã cho tôi bó ý tưởng.

Tôi đã nghĩ về các ListHeaderComponentvị trí phía trên Danh sách phẳng, nhưng vì hướng của tôi Flatlistlà cột, tiêu đề tôi muốn đặt ở bên trái của Flatlist:(

Sau đó, tôi đã phải cố gắng vào VirtualizedList-backedđiều. Tôi chỉ cố gắng đóng gói tất cả các thành phần VirtualizedList, trong đó renderItemsđưa ra chỉ mục và ở đó tôi có thể chuyển các thành phần một cách có điều kiện renderItems.

Tôi có thể đã làm việc này với Flatlist, nhưng tôi chưa thử.
Cuối cùng nó trông như thế này.

<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 />  

và tất nhiên có thể cuộn toàn bộ màn hình.

Vấn đề này xảy ra khi bạn đang sử dụng <FlatList />bên trong <ScrollView>với cùng một định hướng.

Để khắc phục điều này, chỉ cần thêm "ngang" vào FlatList của bạn:

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

NB: FlatList của bạn sẽ hiển thị theo chiều ngang