React-Native FlatList 在 Android 上不滚动答案

【问题标题】：React-Native FlatList doest not scroll on AndroidReact-Native FlatList 在 Android 上不滚动
【发布时间】：2018-10-30 10:44:20
【问题描述】：

我正在构建一个应用程序，其中我有一个视图 dat 显示一个水平 FlatList。列数等于我的数据源中的项目数量，因为我希望所有数据都显示在一行中。

在 iOS 上，这可以正常工作。然而，在 Android 上，我无法滚动 FlatList，即使我可以看到有些项目的部分内容在可见框架之外。我为我的 CollectionView-like FlatLists 制作了一个自定义组件，我称之为CollectionView

这是我遇到问题的组件的渲染函数，我将其命名为 CategoryOverview。它包含一个背景和几个预先生成的附件视图（您可以在 {brackets} 中看到它们），以及我的CollectionView

renderCollectionItem(category) {
    return <CategoryButton category={category} style={height: Dimensions.get('screen').height * 0.65, width: Dimensions.get('screen').width * 0.35, backgroundColor: 'transparent',} onPress={() => this.categoryPressed(category)} />
}


render() {
        return (
            <View style={styles.container}>
                {Renderer.getInstance().renderBackground()} 
                {this.stage}

                <CollectionView style={{left: Renderer.getInstance().sideCurtainWidth(), width: Dimensions.get('screen').width - (2 * Renderer.getInstance().sideCurtainWidth()), height: Dimensions.get('window').height * 0.8}} items={this.state.categories} minimumItemsPerRow={this.state.categories.length} renderItem={this.renderCollectionItem} itemHeight={buttonStyle.height} itemWidth={buttonStyle.width} horizontalSpacing={Dimensions.get('window').width * 0.15}/>

                {this.topAccessories}
                {this.sideCurtains}
                {this.topCurtain}
                {Renderer.getInstance().renderNavigationButton(() => this.backButtonTapped())}
            </View>
        );
    }

这是我的CollectionView 组件的渲染函数：

render() {
    var collectionViewWidth = 0
    if (this.props.style.width != null) {
        collectionViewWidth = this.props.style.width
    } else {
        collectionViewWidth = Dimensions.get('window').width * 0.8
    }

    return (
        <FlatList
            style={{width: collectionViewWidth, flexDirection: 'row', top: this.props.style.top}}
            data = { this.convertToIndexed(this.props.items) }
            contentContainerStyle={internalStyles.collectionViewContentStyle}
            renderItem = {({item}) => (
                this.props.renderItem(item[0])
            )}
            numColumns={(Helpers.isPortrait() ? this.state.portraitRowSize : this.state.landscapeRowSize)}
            key={(Helpers.isPortrait() ? this.state.portraitRowSize : this.state.landscapeRowSize)}
            keyExtractor={(item, index) => index.toString()}
        />
    )
}

我已经使用布局检查器对此进行了测试，并且所有框架在 iOS 和 Android 上都是相同的。此外，在模拟器和实际设备上，常规版本和生产版本似乎没有区别。

问题为什么我的 CollectionView 在 Android 上不滚动，而在 iOS 上滚动？

【问题讨论】：

为什么contentContainerStyle中有宽度？请同时发布您的internalStyles.collectionViewContentStyle
@AyushKhare 这只是我试图排除可能修复它的事情。我已经更新了我的代码！
我不确定您是否为 FlatList 提供宽度，那么它可能会阻止您滚动。试试没有宽度，你在contentContainerStyle中使用flex:1吗？
@AyushKhare 我试图从我的 Flatlist 中删除宽度，但这并不能解决问题，而且我没有在我的 contentContainerStyle 中使用 flex: 1
是的，我删除了样式道具。即使我注释掉 style 和 contentContainerStyle 道具，问题仍然存在。在 iOS 上一切正常。请记住，这是一个水平滚动视图，因此任何顶级样式都可能不会影响任何行为。您还有其他想法吗？

标签： android ios react-native react-native-flatlist

【解决方案1】：

事实证明，设置一个numColumns 属性并没有正式让你垂直滚动。

显然，numColumns 属性只能用于确定适合屏幕边界的列数。为了能够以正确的方式垂直滚动，应该将FlatList 的horizontal 属性设置为true，而不是定义列数。

【讨论】：