ReactNative에서 FlatList의 구체적인 사용 소개

이 글은 주로 ReactNative에서 FlatList의 구체적인 사용법을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

이전에 사용했던 컴포넌트가 ListView였는데, 당시에는 풀다운 새로고침과 풀업 로딩 기능을 추가하고 싶어서 ListView를 일부 캡슐화했는데, 공식 문서를 읽어보니 권장하지 않더군요. 더 이상 ListView를 사용하세요. 효율성 문제 때문에 Android용으로 사용했습니다. 친구들은 모두 Android의 ListView도 직접 처리하지 않으면 효율성 문제가 있다는 것을 알고 있습니다. 그래서 공식적으로는 자체 풀다운 기능을 갖춘 FlatList를 다시 출시했습니다.

기능 소개

1. 완전한 크로스 플랫폼.

2. 가로 레이아웃 모드를 지원합니다.

3. 행 구성요소가 표시되거나 숨겨질 때 구성 가능한 콜백 이벤트.

4. 별도의 헤드 구성 요소를 지원합니다.

5. 별도의 꼬리 구성요소를 지원합니다.

6. 사용자 지정 줄 구분 기호를 지원합니다.

7. 풀다운 새로고침을 지원합니다.

8. 풀업 로딩을 지원합니다.

9. 지정된 행(ScrollToIndex)으로 점프를 지원합니다.

그룹/수업/섹션이 필요한 경우에는 SectionList를 사용하세요(이에 대해서는 나중에 기사에서 소개하겠습니다)

FlatList를 사용하는 것도 단순한 사용법이라면 매우 간단합니다. 난이도에 따라 점차적으로 소개하겠습니다.

직접 사용

<FlatList
data={[{key: &#39;a&#39;}, {key: &#39;b&#39;}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>

이전 ListView와 매우 유사하지만 여기서는 dataSource만 누락되었음을 알 수 있습니다. 데이터를 전달해야 하고 나머지는 FlatList에 남겨져 처리됩니다.

속성 설명

1. ItemSeparatorComponent 행 사이의 구분 기호 구성 요소입니다. 첫 번째 줄 앞이나 마지막 줄 뒤에 나타나지 않습니다. 여기에서 필요에 따라 뷰를 삽입할 수 있습니다

2. ListEmptyComponent 목록이 비어 있으면 구성 요소를 렌더링할 수 있습니다. 이는 React 구성요소, 렌더링 함수 또는 렌더링된 요소일 수 있습니다.

3. ListFooterComponent 꼬리 구성 요소

4. ListHeaderComponent 머리 구성 요소

5. columnWrapperStyle 다중 열 레이아웃이 설정된 경우(즉, numColumns 값이 1보다 큰 정수로 설정된 경우) 다음을 추가로 지정할 수 있습니다. 스타일은 컨테이너의 각 행에 적용됩니다.

6. data 단순화를 위해 data 속성은 현재 일반 배열만 지원합니다. 불변 배열과 같은 다른 특수 데이터 구조를 사용해야 하는 경우 하위 수준 VirtualizedList 구성 요소를 직접 사용하세요.

7. extraData 목록에 사용된 데이터(renderItem, Header 또는 Footer에 사용 여부) 이외의 데이터가 있는 경우 이 속성에 지정해 주세요. 동시에 이 데이터를 수정할 때 참조 주소를 먼저 수정한 다음(예: 먼저 새 개체 또는 배열에 복사) 값을 수정해야 합니다. 그렇지 않으면 인터페이스가 새로 고쳐지지 않을 수 있습니다.

8. getItem은 각 항목을 가져옵니다

9. getItemCount는 항목 속성을 가져옵니다

10. getItemLayout은 콘텐츠 크기를 동적으로 측정하는 오버헤드를 피하기 위한 선택적 최적화이지만 전제는 콘텐츠 크기를 전진. 행 높이가 고정된 경우 getItemLayout은 다음과 유사하게 효율적이고 사용하기 쉽습니다. getItemLayout={(data, index) => ( {length: row height, offset: row height * index, index} )} SeparatorComponent를 지정하는 경우 오프셋 계산 시 구분 기호의 크기를 고려하세요.

11. horizontal을 true로 설정하면 가로 레이아웃 모드로 변경됩니다.

12. initialNumToRender는 처음에 렌더링할 요소 수를 지정합니다. 가급적이면 화면을 채울 수 있을 만큼만 렌더링하여 가능한 한 짧은 시간 내에 표시되는 콘텐츠가 사용자에게 표시되도록 합니다. 렌더링된 요소의 첫 번째 배치는 슬라이딩 프로세스 중에 언로드되지 않습니다. 이는 사용자가 맨 위로 돌아갈 때 요소의 첫 번째 배치를 다시 렌더링할 필요가 없도록 하기 위한 것입니다.

13. initialScrollIndex는 렌더링이 시작되는 항목 인덱스를 지정합니다.

14. keyExtractor 이 함수는 특정 항목에 대한 고유 키를 생성하는 데 사용됩니다. Key의 기능은 React가 유사한 요소의 서로 다른 개체를 구별하여 새로 고칠 때 변경된 위치를 확인할 수 있도록 하고 다시 렌더링 비용을 줄이는 것입니다. 이 함수를 지정하지 않으면 기본적으로 item.key가 키 값으로 추출됩니다. item.key가 없으면 배열 아래 첨자가 사용됩니다.

15. legacyImplementation은 이전 ListView 구현을 사용하기 위해 true로 설정됩니다.

16. numColumns 다중 열 레이아웃은 비수평 모드에서만 사용할 수 있습니다. 즉, 가로={false}여야 합니다. 이때 구성 요소 내의 요소는 flexWrap이 활성화된 레이아웃과 유사하게 왼쪽에서 오른쪽, 위에서 아래로 Z 모양으로 배열됩니다. 구성 요소 내의 요소는 높이가 동일해야 합니다. 폭포 레이아웃은 아직 지원되지 않습니다.

17. onEndReached는 목록이 콘텐츠 하단에서 onEndReachedThreshold보다 작은 거리로 스크롤될 때 호출됩니다.

18. onEndReachedThreshold는 onEndReached 콜백이 트리거되는 콘텐츠 하단에서 얼마나 멀리 떨어져 있는지를 결정합니다. 이 매개변수는 픽셀 단위가 아닌 비율입니다. 예를 들어 0.5는 콘텐츠 하단으로부터의 거리가 현재 목록의 표시 길이의 절반일 때 트리거된다는 의미입니다.

19. onRefresh如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

20. onViewableItemsChanged在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性

21. refreshing在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。

22. renderItem根据行数据data，渲染每一行的组件。这个参照下面的demo

23. viewabilityConfig请参考ViewabilityHelper 的源码来了解具体的配置。

方法

scrollToEnd
滚动到底部。如果不设置getItemLayout
属性的话，可能会比较卡。

scrollToIndex
滚动到指定index的item
如果不设置getItemLayout
属性的话，无法跳转到当前可视区域以外的位置。

scrollToItem
滚动到指定item，如果不设置getItemLayout
属性的话，可能会比较卡。

scrollToOffset
滚动指定距离

Demo：

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

var ITEM_HEIGHT = 100;

export default class FlatListDemo extends Component {

  _flatList;

  _renderItem = (item) => {
    var txt = '第' + item.index + '个' + ' title=' + item.item.title;
    var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
    return <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
  }

  _header = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是头部</Text>;
  }

  _footer = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是尾部</Text>;
  }

  _separator = () => {
    return <View style={{height:2,backgroundColor:&#39;yellow&#39;}}/>;
  }

  render() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({key: i, title: i + &#39;&#39;});
    }

    return (
      <View style={{flex:1}}>
        <Button title=&#39;滚动到指定位置&#39; onPress={()=>{
          //this._flatList.scrollToEnd();
          //this._flatList.scrollToIndex({viewPosition:0,index:8});
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        <View style={{flex:1}}>
          <FlatList
            ref={(flatList)=>this._flatList = flatList}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}

            //numColumns ={3}
            //columnWrapperStyle={{borderWidth:2,borderColor:&#39;black&#39;,paddingLeft:20}}

            //horizontal={true}

            //getItemLayout={(data,index)=>(
            //{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index}
            //)}

            //onEndReachedThreshold={5}
            //onEndReached={(info)=>{
            //console.warn(info.distanceFromEnd);
            //}}

            //onViewableItemsChanged={(info)=>{
            //console.warn(info);
            //}}
            data={data}>
          </FlatList>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  txt: {
    textAlign: &#39;center&#39;,
    textAlignVertical: &#39;center&#39;,
    color: &#39;white&#39;,
    fontSize: 30,
  }
});

效果图：

进阶使用

在这里我准备了一份代码示例：

const {width,height}=Dimensions.get('window')
export default class Main extends Component{
  // 构造
  constructor(props) {
    super(props);
  }
  refreshing(){
    let timer = setTimeout(()=>{
          clearTimeout(timer)
          alert('刷新成功')
        },1500)
  }
  _onload(){
    let timer = setTimeout(()=>{
      clearTimeout(timer)
      alert('加载成功')
    },1500)
  }
  render() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({key: i, title: i + &#39;&#39;});
    }

    return (
      <View style={{flex:1}}>
        <Button title=&#39;滚动到指定位置&#39; onPress={()=>{
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        <View style={{flex:1}}>
          <FlatList
            ref={(flatList)=>this._flatList = flatList}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}
            onRefresh={this.refreshing}
            refreshing={false}
            onEndReachedThreshold={0}
            onEndReached={
              this._onload
            }
            numColumns ={3}
            columnWrapperStyle={{borderWidth:2,borderColor:&#39;black&#39;,paddingLeft:20}}

            //horizontal={true}

            getItemLayout={(data,index)=>(
            {length: 100, offset: (100+2) * index, index}
            )}

            data={data}>
          </FlatList>
        </View>

      </View>
    );
  }


  _renderItem = (item) => {
    var txt = &#39;第&#39; + item.index + &#39;个&#39; + &#39; title=&#39; + item.item.title;
    var bgColor = item.index % 2 == 0 ? &#39;red&#39; : &#39;blue&#39;;
    return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
  }

  _header = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是头部</Text>;
  }

  _footer = () => {
    return <Text style={[styles.txt,{backgroundColor:&#39;black&#39;}]}>这是尾部</Text>;
  }

  _separator = () => {
    return <View style={{height:2,backgroundColor:&#39;yellow&#39;}}/>;
  }


}
const styles=StyleSheet.create({
  container:{

  },
  content:{
    width:width,
    height:height,
    backgroundColor:&#39;yellow&#39;,
    justifyContent:&#39;center&#39;,
    alignItems:&#39;center&#39;
  },
  cell:{
    height:100,
    backgroundColor:&#39;purple&#39;,
    alignItems:&#39;center&#39;,
    justifyContent:&#39;center&#39;,
    borderBottomColor:&#39;#ececec&#39;,
    borderBottomWidth:1

  },
  txt: {
    textAlign: &#39;center&#39;,
    textAlignVertical: &#39;center&#39;,
    color: &#39;white&#39;,
    fontSize: 30,
  }

})

运行效果如下：

总结

总体来说Flatlist还是比ListView用起来方便的，而且提供的功能更多。

相关推荐：

ReactNative实现Toast的示例分享

ReactNative中使用Redux架构总结_javascript技巧

有关ReactNative Image组件详细介绍

위 내용은 ReactNative에서 FlatList의 구체적인 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!