React-Native FlatList 不会在 Android 上滚动

Question

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

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

这里是我遇到问题的组件的render函数，我命名为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 上滚动？

Answer 1

原来设置一个numColumns属性官方不让你垂直滚动

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

React-Native FlatList 不会在 Android 上滚动

React-Native FlatList doest not scroll on Android

android

ios

react-native

react-native-flatlist