Javascript React-Native 另一个 VirtualizedList 支持的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/58243680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Native another VirtualizedList-backed container
提问by David Schilling
After upgrading to react-native 0.61 i get a lot of warnings like that:
升级到 react-native 0.61 后，我收到了很多这样的警告：
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
What is the other VirtualizedList-backed containerthat i should use, and why is it now advised not to use like that?
VirtualizedList-backed container我应该使用的另一个是什么，为什么现在建议不要那样使用？
采纳答案by Afraz Hussain
If someone's still looking for a suggestion to the problem that @Ponleu and @David Schilling have described here (regarding content that goes above the FlatList), then this is the approach I took:
如果有人仍在寻找对 @Ponleu 和 @David Schilling 在此处描述的问题的建议（关于高于 FlatList 的内容），那么这就是我采用的方法：
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
You can read more about this here: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
您可以在此处阅读更多相关信息：https: //facebook.github.io/react-native/docs/flatlist#listheadercomponent
Hopefully it helps someone. :)
希望它可以帮助某人。:)
回答by Edward D'Souza
Just in case this helps someone, this is how I fixed the error in my case.
以防万一这对某人有帮助，这就是我在我的情况下修复错误的方式。
I had a FlatListnested inside a ScrollView:
我有一个FlatList嵌套在 a 中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>
);
}
and I got rid of the ScrollViewby using the FlatListto render everything I needed, which got rid of the warning:
我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}
/>
);
}
回答by Variag
Looking at the examples in docs I've changed container from:
查看文档中的示例，我已将容器从以下位置更改：
<ScrollView>
<FlatList ... />
</ScrollView>
to:
到：
<SafeAreaView style={{flex: 1}}>
<FlatList ... />
</SafeAreaView>
and all those warnings disappeared.
所有这些警告都消失了。
回答by Takahiro Nishino
I tried some ways to solve this, including ListHeaderComponentor ListFooterComponent, but it all didn't fit for me.
我尝试了一些方法来解决这个问题，包括ListHeaderComponent或ListFooterComponent，但这一切都不适合我。
layout I wanted to achieve is like this, and I wanted to get scrolled in once.
我想要实现的布局是这样的，我想滚动一次。
<ScrollView>
<View>I'm the first view</View>
<View>I'm the second view</View>
<MyFlatList />
</ScrollView>
First I want to say thanks to thisissue and comments, which gave me bunch of ideas.
首先我要感谢这个问题和评论，它们给了我很多想法。
I was thinking of ListHeaderComponentplaces above the Flatlist, but since my Flatlist's direction was column, the header I wanted to place went on the left of the Flatlist:(
我正在考虑ListHeaderComponentFlatlist 上方的位置，但由于我Flatlist的方向是列，因此我想要放置的标题位于Flatlist:(
Then I had to try on VirtualizedList-backedthing. I just tried to pack all components in VirtualizedList, where renderItemsgives index and there I could pass components conditionally to renderItems.
然后我不得不试一试VirtualizedList-backed。我只是试图打包中的所有组件VirtualizedList，其中renderItems给出了指数，有我可以有条件地传递组件renderItems。
I could have worked this with Flatlist, but I haven't tried yet.
Finally it looks like this.
我本可以和 一起工作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 />
and of course able to scroll the whole screen.
当然能够滚动整个屏幕。
回答by amike
As @Brahim stated above, setting the horizontalproperty to trueseem to resolve the issues for a FlatListembedded in a ScrollView.
正如上面@Brahim 所述，将horizontal属性设置为true似乎可以解决FlatList嵌入在ScrollView.
回答by tvankith
In my opinion i can use map instead of FlatList. But in my case i wan't to show large list. Not using FlatList may cause performance issue. so i used this to suppress warning https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509
在我看来，我可以使用 map 而不是 FlatList。但就我而言，我不想显示大列表。不使用 FlatList 可能会导致性能问题。所以我用它来抑制警告https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509
回答by Tuan Dat Tran
The warning appears because ScrollViewand FlatListshare the same logic, if FlatListrun inside ScrollView, it's duplicated
出现警告是因为ScrollView并FlatList共享相同的逻辑，如果FlatList在里面运行ScrollView，它会重复
By the way SafeAreaViewdoesn't work for me, the only way to solve is
顺便说一句SafeAreaView对我不起作用，唯一的解决方法是
<ScrollView>
{data.map((item, index) => {
...your code
}}
</ScrollView>
The error disappears
错误消失
回答by Brahim DEBBAGH
This problem come when you are using <FlatList />inside <ScrollView>with the same orientation.
当您以相同的方向使用<FlatList />内部时，就会出现这个问题<ScrollView>。
To fix this, just add "horizontal" to your FlatList :
要解决此问题，只需将“水平”添加到您的 FlatList ：
<ScrollView>
<FlatList **horizontal** ... />
</ScrollView>
NB : Your FlatList will rendered horizontally
注意：您的 FlatList 将水平呈现
