[javascript] 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가 가로로 렌더링됩니다
