reactjs - React Native - 相同类型的组件一起滚动

Question

我将NativeBase与React Native一起使用。

这是使用NativeBase创建选项卡的方式：

<Tabs>
  <Tab heading="Tab1">
    <Tab1 />
  </Tab>
  <Tab heading="Tab2">
    <Tab2 />
  </Tab>
</Tabs>

我正在循环中创建这些选项卡：

[someArray].map((item, index) => {
            return (
                <Tab
                    key={index}
                    heading={
                        <TabHeading>
                            <Text>{item.tabText}</Text>
                        </TabHeading>
                    }>
                    <List type={item.listType} data={item.listData}/>
                </Tab>
            );
        });

一切正常，除了当我在一个选项卡中垂直滚动列表（自定义组件）时 - 它也在所有其他选项卡中同时滚动。这是一个奇怪的效果。

自然，我希望每个List都是一个单独的实体并且可以自行滚动。

尝试添加key={index}和许多其他操作，但无法使其正常工作。

有人可以帮忙吗？

Answer 1

你能试一下吗

<List type={item.listType} data={item.listData} ind={index}/>

并在列表中使用它

renderList() {
        return this.props.data.map((item, index) => {
            return (
                const newIndex = index + '_' + this.props.ind
                <ListItem type={this.props.type} text={item} key={newIndex}/>
            );
        });
    }