web-dev-qa-db-ja.com

AndroidのFlatList（React Native）でスクロールバーを非表示にします

アプリでFlatList（React-native）を使用しようとしています。私はそれを水平に使用しており、スクロールバーを見ることができます。 ScrollViewには、FlatListではなくスクロールバーを非表示にするオプションがあります。誰かがそれを他の方法で隠すことができましたか？親と子のコンテナのソリューションを使用しようとしました（ スクロールバーを非表示にしますが、まだスクロールできます ）が機能しませんでした。

import React, { Component } from 'react';
import { Text, View, FlatList, StyleSheet, ScrollView } from 'react-native';
import { Card, Button } from 'react-native-elements';

const data = [
    { id: 1, title: 'title 1', details: 'details 1 details 1 details 1' },
    { id: 2, title: 'title 2', details: 'details 2 details 2 details 2 details 2 details 2 details 2' },
    { id: 3, title: 'title 3', details: 'details 3 details 3' },
    { id: 4, title: 'title 4 title 4', details: 'details 4' },
];
class CategoryRow extends Component {

    _keyExtractor = (item, index) => item.id;

    _renderItem = (item) => {
        return (
            <Card style={styles.cardContainer}>
                <Text>{item.title}</Text>   
                <Text>{item.details}</Text> 
            </Card>
        );
    }

    render() {
        return (
            <View style={{ flex: 1, overflow:'hidden' }}>
                <View style={{ overflow:'hidden' }}>
                    <Text>Category 1</Text>
                    <FlatList
                        horizontal
                        data={data}
                        renderItem={({ item }) => this._renderItem(item)}
                        keyExtractor={this._keyExtractor}

                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    cardContainer: {
        width: 140,
        height: 150,
        borderWidth: 0.5,
        borderColor: 'grey',
        overflow: 'scroll',
    },
})

export default CategoryRow;
react-nativereact-native-flatlist
31
sushil bansal

追加するだけ

showsHorizontalScrollIndicator={false}
97
Kawatare267

これを試して、後述のListViewの水平方向の追加（horizo​​ntal = {true}）を行い、スクロールバーを非表示にするだけの場合は、追加（showsHorizo​​ntalScrollIndicator = {false}）します。

<ListView showsHorizontalScrollIndicator={false}
                      horizontal={true}

/>

5
Atif Mukhtiar