React Native FlatList 嵌套在具有相同方向的 FlatList 中

Posted 2023-02-16

【中文标题】React Native FlatList 嵌套在具有相同方向的 FlatList 中

【英文标题】：React Native FlatList nested inside FlatList with same orientation

【发布时间】：2018-09-15 03:55:28

【问题描述】：

我无法创建嵌套在具有相同方向的 FlatList 内的 FlatList；

结果是父级是水平的，而子级是垂直的；

这是我的代码：

renderSlides(question) 
    return <View key=question.item.code
                 style=flex: 1,width:350>
        <FlatList
            ref='scrollPick'
            data=[k:'A',k:'b',k:'c']
            horizontal=true
            renderItem=(rate)=>return (
                <View >
                    <Text>rate.item.k</Text>
                </View>);
            keyExtractor= (item, index) => index
        />
    </View>;


render() 
    return (
        <View style=CONTAINERS.MAIN_COLUMN_BLUE>
            <View style=[NAV.CONTAINER_GENERAL, NAV.CONTAINER_ASSESSMENT, flex: 1]>
                <TopBar barType="ex" title=I18n.t('assessment.title') navigator=this.props.navigator
                        closeFunction=this.handleClose></TopBar>
            </View>
            <FlatList
                ref=(ref) =>  this.flatListRef = ref; 
                horizontal=true
                data=[k:'1',k:'2',k:'3',k:'4',k:'5',k:'6',k:'q']
                renderItem=this.renderSlides
                keyExtractor=(item, index) => index
                horizontal=true
                getItemLayout=this.getItemLayout
                contentContainerStyle= flexGrow: 1
            />
        </View>
    );

有人遇到过同样的问题吗？ （而且我不能使用 scrollView ）

【问题讨论】：

您是否尝试过在

这样的 标签上使用flexDirection : 'row' >

它的作用

@AharonVishinsky 你找到解决方案了吗？

找到解决方案了吗？

【参考方案1】：

终于找到了！

您从react-native 导入的第一个平面列表

import FlatList from 'react-native'

第二个（内部FlatList）可以从react-native-gesture-handler导入

import FlatList as FlatList2 from 'react-native-gesture-handler'

然后你可以使用相同的方向，它会工作。

【讨论】：

你救了我……我寻找解决方案已经超过 3 天了。

它在 ios 上像魅力一样工作，但似乎不适用于 android :-(