[react-native] 10 组件 sectionlist

因为 section list 是对数据展示的优化组件。我们需要数据，为了节省时间，直接从官网上CV过来示例模版

然后接下来我们可以看到这个数据常量，以后我们的数据也按照这个格式或者在这个格式的基础上修改就行。

js 复制代码

//数据
const DATA = [  
    {  
        title: 'Main dishes',  
        data: ['Pizza', 'Burger', 'Risotto'],  
    },  
    {  
        title: 'Sides',  
        data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],  
    },  
    {  
        title: 'Drinks',  
        data: ['Water', 'Coke', 'Beer'],  
    },  
    {  
        title: 'Desserts',  
        data: ['Cheese Cake', 'Ice Cream'],  
    },  
];

必知的4大属性

js 复制代码

<SafeAreaView style={styles.container}>  
    <SectionList  
        sections={DATA}  
        keyExtractor={(item, index) => item + index}  
        renderItem={({item}) => 
            (<View style={styles.item}>  
                <Text style={styles.title}>{item}</Text>  
             </View>  
            )}  
        renderSectionHeader={({section: {title}}) => (  
        <Text style={styles.header}>{title}</Text>)}  
    />  
</SafeAreaView>

元素与元素之间的分隔符

js 复制代码

ItemSeparatorComponent={() => {  
    //声明项目之间的分隔符  
    return <View style={{borderBottomWidth:1, borderBottomColor:'red'}} />  
}}

数据为空的时候所展示的组件

js 复制代码

ListEmptyComponent={()=>{  
    //列表数据为空的时候，激活展示的组件  
    return <Text style={{fontSize:30}}>404 Forbidden</Text>  
}}

我们再去把上面的数据注释掉

js 复制代码

const DATA = [  
// {  
// title: 'Main dishes',  
// data: ['Pizza', 'Burger', 'Risotto'],  
// },  
// {  
// title: 'Sides',  
// data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],  
// },  
// {  
// title: 'Drinks',  
// data: ['Water', 'Coke', 'Beer'],  
// },  
// {  
// title: 'Desserts',  
// data: ['Cheese Cake', 'Ice Cream'],  
// },  
];

这里需要注意，我们只注释掉里面的数据，不要把变量也给注释掉了。然后，数据没有了之后，我们就会看到我们在数据没有的时候，所指定想要展示的内容。

下拉刷新属性如何控制呢

js 复制代码

// 下拉刷新  
refreshing={false}  
onRefresh={()=>{  
    alert('下拉刷新')  
}}

refreshing 如果定成 true 的话就会一直刷新。而这个刷新动作往往都是由我们的数据所决定的。所以在这里，我们可以先写一个构造函数。

js 复制代码

constructor(){  
    super()  
    this.state={isFresh:false}  
    }  

    loadData=()=>{this.setState({isFresh:true})}  
    setTimeout(()=>{this.setState({isFresh:false}) alert('下拉刷新')}, 2000)

下拉刷新

js 复制代码

// 下拉刷新  
refreshing={this.state.isFresh}  
    onRefresh={()=>{this.loadDate}

上拉刷新

js 复制代码

// 上拉刷新  
onEndReachedThreshold={0.1}  
onEndReached={()=>{alert('到底了')}}

这里面的 0.1 代表的是，当数据还剩 10% 后，触发上拉刷新。

声明头部和尾部组件

js 复制代码

ListHeaderComponent={()={  
//声明列表的头部组件  
return <Text style={{fontSize:40}}>哈哈哈</Text>  
}}  
  
ListFooterComponent={()={  
//声明列表的尾部组件  
return <Text style={{fontSize:40}}>哈哈哈</Text>  
}}