Question

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

在iOS上，这可以正常工作。但是，在Android上，即使可以看到有些项目的部分内容超出可见框架，也无法滚动FlatList。我为类似CollectionView的FlatList制作了一个自定义组件，我将其称为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上无法在Android上滚动？

Answer 1

事实证明，正式设置numColumns属性不会让您垂直滚动。

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

React-Native FlatList在Android上不滚动

1 个答案: