使用 FlatList 在 React-Native Nativebase Tabs 中显示 Tabs答案

【问题标题】：Using FlatList to display Tabs in React-Native Nativebase Tabs使用 FlatList 在 React-Native Nativebase Tabs 中显示 Tabs
【发布时间】：2019-11-05 03:16:30
【问题描述】：

我正在尝试遍历数据源并根据该数据源显示Tabs，我正在使用FlatList，因为这是代码

<Tabs
   renderTabBar={() => <ScrollableTab />}
   tabBarUnderlineStyle={{backgroundColor: "#4285f4"}}
   tabBarBackgroundColor="#fff"
>
    <FlatList
        data={this.state.dataSource}
        renderItem={({item}) =>
            <Tab
               heading={item.title}
            >
                <Text>Tab details</Text>
            </Tab>
    />
</Tabs>

这总是给我一个错误提示

undefined is not an object (evaluating 'child.props.heading.props') the error is located at ScrollableTabView

我不知道有什么问题我尝试使用 map 而不是 FlatList 并且效果很好

【问题讨论】：

不能使用 FlatList 作为 Tabs 的子组件，子组件必须是 Tab 组件。为什么你需要 Flatlist，用于垂直标签？
好吧，它们不是垂直的，我忘了放水平道具...起初我是用地图做的，然后标签开始在 ios 上像疯了一样闪烁...我想也许使用 flatlist 会修复它
你有多少个标签页？
它基于数据但最多8个
你测试的是发布版本还是开发版本？

标签： react-native tabs react-native-flatlist native-base

【解决方案1】：

您必须将 Nativebase 选项卡组件替换为

https://github.com/ptomasroos/react-native-scrollable-tab-view/blob/master/README.md.

并且不需要为了更好的性能而使用 Flatlist 组件作为子组件，它不会起作用。

【讨论】：