React-Native 다른 VirtualizedList 지원 컨테이너

반응 네이티브 0.61로 업그레이드 한 후 다음과 같은 경고가 많이 발생합니다.

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

VirtualizedList-backed container내가 사용해야 하는 다른 것은 무엇이며, 왜 그렇게 사용하지 않는 것이 좋습니다?

누군가가 여전히 @Ponleu 및 @David Schilling이 FlatList보다 높은 내용에 대해 설명 한 문제에 대한 제안을 찾고 있다면 이것이 내가 취하는 접근법입니다.

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

https://facebook.github.io/react-native/docs/flatlist#listheadercomponent 여기에서 자세한 내용을 읽을 수 있습니다.

잘만되면 그것은 누군가를 돕는다. :)

이것이 누군가에게 도움이되는 경우를 대비하여 내 경우의 오류를 수정 한 방법입니다.

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

문서의 예제를 보면 컨테이너를 다음과 같이 변경했습니다.

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

에:

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

모든 경고가 사라졌습니다.

내 의견으로는 FlatList 대신 map을 사용할 수 있습니다. 그러나 제 경우에는 큰 목록을 보여주고 싶지 않습니다. FlatList를 사용하지 않으면 성능 문제가 발생할 수 있습니다. 그래서 나는 이것을 경고 https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

때문에 경고가 표시 ScrollView하고 FlatList있는 경우, 같은 논리를 공유하고 FlatList실행 내부가 ScrollView,가 중복 것

그건 그렇고 SafeAreaView나에게 효과가 없다, 해결하는 유일한 방법은

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

오류가 사라집니다

나는 포함하여이 해결하는 몇 가지 방법 시도 ListHeaderComponent또는 ListFooterComponent,하지만 모두가 나를 위해 적합하지 않았다.

달성하고자하는 레이아웃은 이와 같으며 한 번 스크롤하고 싶었습니다.

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

우선은 덕분에하고 싶은 말 이 나에게 아이디어의 무리를 준 문제 및 의견.

나는 생각했다 ListHeaderComponentFlatlist 위의 장소,하지만 내 이후 Flatlist의 방향이 열였다, 내가 장소에 원하는 헤더는 왼쪽에 갔다 Flatlist:(

그런 다음 VirtualizedList-backed일 을 시도 해야했습니다. 난 그냥 모든 구성 요소를 포장하려 VirtualizedList하는 경우, renderItems인덱스를 제공하고 I가 조건부 구성 요소가 통과 할 수 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 />  

물론 전체 화면을 스크롤 할 수 있습니다.

같은 방향으로 <FlatList />내부 <ScrollView>를 사용할 때이 문제가 발생합니다 .

이 문제를 해결하려면 FlatList에 "horizontal"을 추가하십시오.

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

NB : FlatList가 가로로 렌더링됩니다