在 Android 中隐藏平面列表(反应本机)中的滚动条

我试图在我的应用程序中使用平面列表(React-national)。我使用它水平,可以看到滚动条。在 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;
146450 次浏览

只要加上

showsHorizontalScrollIndicator={false}

尝试使 ListView 水平添加(水平 = { true }) ,如果您只想隐藏滚动条,只需添加(showsHorizontalScrollIndicator = { false })

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

如果您试图隐藏垂直滚动条,请使用:

showsVerticalScrollIndicator={false}

禁用垂直和水平滚动指示器

<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>

从 VirtualizedList 继承 FlatList。
VirtualizedList is inherited from ScrollView.
因此,可以使用 ScrollView 道具隐藏 FlatList 中的 scrollBar 指示器。

<FlatList
...
showsVerticalScrollIndicator ={false}
showsHorizontalScrollIndicator={false}
...
/>

在我的案例中,使用 Animated版本的 Flatlist解决了这个问题:

<Animated.FlatList
...
showsVerticalScrollIndicator ={false}
showsHorizontalScrollIndicator={false}
...
/>