React-Native FlatList не прокручивается на Android - PullRequest
Новая
       0

React-Native FlatList не прокручивается на Android

0 голосов
/ 30 октября 2018

Я создаю приложение, в котором у меня есть представление данных, отображающее горизонтальный FlatList. Количество столбцов равно количеству элементов в моем источнике данных, поскольку я хочу, чтобы все данные отображались в одной строке.

На iOS это работает нормально. В Android, однако, я не могу прокрутить FlatList, хотя вижу, что есть элементы с частью их содержимого вне видимой рамки. Я создал пользовательский компонент для моих плоских списков, похожих на CollectionView, которые я назвал CollectionView

Вот функция рендеринга компонента, в котором я столкнулся с проблемой, которую я назвал CategoryOverview. Он содержит фон и несколько дополнительных видов, которые все предварительно сгенерированы (вы можете увидеть их в {скобках}), и мой 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?

1 Ответ

0 голосов
/ 31 октября 2018

Оказывается, что установка свойства numColumns официально не позволяет вам прокручивать по вертикали.

По-видимому, свойство numColumns можно использовать только для определения количества столбцов, которые вписываются в границы экрана. Чтобы иметь возможность правильно прокручивать по вертикали, нужно установить horizontal prop of FlatList в true вместо определения количества столбцов.

...