FlatList 구성 요소를 사용한 React Native의 업스트림 플러시, 드롭다운 로드

문서 목록

에 사용된 FlatList 속성

샘플 코드

App.js

Home.js

FlatList.js

사용된 FlatList 속성

데이터: array 렌더링 목록의 데이터 원본으로 현재 일반 그룹

만 지원합니다

renderItem: 값은 functiondata에서 하나씩 데이터를 꺼내 목록에 렌더링합니다.

ListEmptyComponent: 데이터는 빈 그룹으로 이 구성 요소를 렌더링합니다

ListFooterComponent: 목록 끝에 렌더링된 구성 요소

onEndReachedThreshold: number 이 매개 변수는 비례값이고 픽셀 단위입니다.예를 들어 0.5는 내용의 맨 밑에 있는 거리가 현재 목록의 절반일 때 터치하는 것을 나타낸다

onEndReached: function 밑에 거리가 부족onEndReachedThreshold할 때 호출(5조와 협조하여 사용 가능, 페이지 나누기에 사용)

onRefresh: function 데이터를 불러올 때 실행하는 방법으로 refreshing와 함께 사용합니다.표시기의 색상을 수정하려면 refreshControl 속성

을 사용하십시오

refreshing: 에서 이 속성을true로 설정하면 목록에 불러오는 기호가 표시됩니다

progressViewOffset: number하단에 더 많은 지시기를 불러오는 위치를 설정합니다

예제 코드

App.js

import React from 'react'
import {createStackNavigator,createAppContainer} from 'react-navigation'
import Home from './components/Home'
import FlatListPage from './components/lists/FlatListPage'

const StackNavigator = createStackNavigator(
    {
        Home:{
            screen: Home,
            navigationOptions:{
                title:" "
            }
        },
        FlatListPage:{
            screen: FlatListPage,
            navigationOptions:{
                title:"FlatList"
            }
        }
    },
    {
        headerLayoutPreset:"center"
    }
)
const AppContainer = createAppContainer(StackNavigator)
export default AppContainer

Home.js

import React from 'react'
import {View,Button,StyleSheet} from 'react-native'
export default class Home extends React.Component{
    render(){
        return(
            <View>
                <View style={style.button}>
                    <Button title={' FlatList '} 
                    onPress={()=>this.props.navigation.navigate('FlatListPage')}
                    style={style.button}/>
                </View>
            </View>
        )
    }
}

const style=StyleSheet.create({
    button:{
        marginBottom: 10
    }
})

FlatList.js

import React from 'react'
import {FlatList,View,Text,StyleSheet} from 'react-native'

export default class FlatListPage extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            refresh:false,
            listData:[]
        }
    }
    getNewData(){
        this.setState({
            refresh:true
        })
        let newData = []
        for (let i=0;i<2;i++) {
            newData.push('new data')
        }
        setTimeout(()=>{
            this.setState({
                refresh:false,
                listData:[...newData,...this.state.listData]
            })
        },1500)
    }
    componentDidMount(){
        this.getData()
    }
    getData(){
        let newData = []
        for (let i=this.state.listData.length;i<this.state.listData.length+5;i++) {
            newData.push(i)
        }
        setTimeout(()=>{
            this.setState({
                listData:[...this.state.listData,...newData]
            })
        },1500)
    }
    render(){
        return(
            <View>
                <FlatList
                    //   8
                    data={this.state.listData}

                    renderItem={(data)=>{
                        return <Text style={style.item}>{data.item}</Text>
                    }}

                    //  
                    refreshing={this.state.refresh}
                    onRefresh={()=>{
                        this.getNewData()
                    }}

                    //  
                    onEndReachedThreshold={.3}
                    onEndReached={()=>{
                        this.getData()
                    }}

                    ListEmptyComponent={
                    <Text style={{textAlign: "center",marginBottom: 10}}> </Text>}
                    
                    ListFooterComponent={
                    <Text style={{textAlign: "center",marginBottom: 10}}> </Text>}
                    //  key 
                    keyExtractor={(item,index)=>index}
                    // 
                    progressViewOffset={50} />
            </View>
        )
    }
}
const style = StyleSheet.create({
    item:{
        backgroundColor:"green",
        marginBottom: 10,
        height:150,
        lineHeight:150,
        textAlign: "center"
    }
})