react native 中的嵌套列表组件答案

【问题标题】：nested list components in react nativereact native 中的嵌套列表组件
【发布时间】：2021-04-04 15:07:47
【问题描述】：

我有一个关于 React Native 中嵌套列表组件的一般性问题。

我经常偶然发现此错误消息：

VirtualizedLists 永远不应该嵌套在普通的 ScrollViews 中相同的方向 - 使用另一个 VirtualizedList 支持的容器而是。

当我尝试在 ScrollView 组件中放置 FlatList 时出现此错误。我知道如果我只是用 ScrollView 替换 FlatList 并在 ScrollView 中有一个 ScrollView，我可以轻松修复错误，但问题是：

我需要一个列表组件，它在其中显示动态数量的自定义组件，这就是我选择 FlatList 的原因。我可以获取一个对象列表，并为其中的每个对象在我的列表组件中创建许多组件。

这是我要完成的示例：

const DATA = [{id: 121212, name: "Alpha"}, {id: 23131, name: "Beta"}, {id: 3544452, name: "Gamma"}, {id: 1234512, name: "Delta"}, ...]

<View>
   <ScrollView>
      <Any other component thats not important/>
      <SPECIALLIST //Thats the component I look for, the special list that doesnt throw any error anymore
         <CustomComponent id={DATA[0][0]}/>
         <CustomComponent id={DATA[1][0]}/>
         <CustomComponent id={DATA[2][0]}/>
         ...
         ...
         //create as many CustomComponents as items inside the DATA array, so basicly a DYNAMIC amount of components
      />
      <Any other component thats not important/>
   </ScrollView>
</View>

有谁知道我可以使用哪种 ListComponent 作为我的 SPECIALLIST 以避免错误消息并在列表中创建一个可以容纳动态数量的任何类型组件的列表？

【问题讨论】：

这能回答你的问题吗？ React-Native another VirtualizedList-backed container
请看我的回答stackoverflow.com/a/64051814/8798220
这个数据对象没有格式化，应该是const DATA = [{id: 121212, name: "Alpha"}, {id: 23131, name: "Beta"}, {id: 3544452, name: "Gamma"}, {id: 1234512, name: "Delta"}, ...]
@NishargShah 对不起，但没有。它并没有真正解决我的问题。我的意思是这很好，现在我知道如何禁用错误消息，但这并没有解决我的问题。
@rodrigoagostinho 你是对的，先生！我会尽快改正

标签： javascript reactjs react-native

【解决方案1】：

我自己找到了答案。我找到了一个 youtube 教程，并注意到一个人正在使用 map() 命令和一个平面列表，这就是我正在寻找的解决方案，并且对我有用：

const DATA = [{id: 121212, name: "Alpha"}, {id: 23131, name: "Beta"}, {id: 3544452, name: "Gamma"}, {id: 1234512, name: "Delta"}, ...]    

<View>
       <ScrollView>
          <Any other component thats not important/>
          <ScrollView>
             {DATA.map(item => (
                <CustomComponent setid={item.id} setname={item.same}/>
                    ))}
          <Any other component thats not important/>
       </ScrollView>
    </View>

使用 map() 命令，我能够实现我的目标：在 ScrollView(2) 中创建 ScrollView(1) 并将动态数量的组件放入 ScrollView(1)，具体取决于我的 DATA 数组的长度是。

【讨论】：