2017-05-15 4 views
5

내 앱에서 FlatList (React-native)를 사용하려고합니다. 가로로 사용하고 스크롤바를 볼 수 있습니다. ScrollView에는 스크롤바를 숨기고 FlatList에는 숨길 수있는 옵션이 있습니다. 누군가 그것을 다른 방법으로 숨길 수 있었습니까? 부모 컨테이너 & (Hide scroll bar, but still being able to scroll)의 솔루션을 사용해 보았지만 작동하지 않았습니다.안드로이드의 FlatList (React Native) 스크롤바 숨기기

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; 
+4

시도'showsHorizontalScrollIndicator은 = {FALSE}' – Raymond

답변

26

그냥

showsHorizontalScrollIndicator={false} 
+0

이 worke의 d 그러나 공식 문서에서는 FlatList에 대한 소품으로 언급되지 않았습니다. –

0

은 ListView에 수평 애드온 (수평 = {TRUE}) 아래에서 언급 할이 시도 추가 당신은 방금 추가 스크롤 막대를 숨기려면 (showsHorizontalScrollIndicator = {FALSE})

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

/>