RN实现iOS tableview分组吸顶效果

最新推荐文章于 2022-07-15 10:48:06 发布

原创

最新推荐文章于 2022-07-15 10:48:06 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

这是一个使用React Native编写的示例应用，演示如何在iOS上实现TableView的分组吸顶效果。应用中包含了ListView组件，通过DataSource处理数据，用以展示分组列表，并使用自定义的renderRow和renderSectionHeader方法来渲染行和分组头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    ListView,
    Image,
    TouchableOpacity
} from 'react-native';

var Car = require('./Car.json');

var ListDemo3 = React.createClass({
  getInitialState(){
    return{
      ds: new ListView.DataSource({
        getSectionData: (dataBlob, sectionID) => dataBlob[sectionID],
        getRowData: (dataBlob, sectionID, rowID) => dataBlob[sectionID + ':' + rowID],
        rowHasChanged: (r1, r2) => r1 !== r2,
        sectionHeaderHasChanged:(s1, s2) => s1 !== s2
      })
    }
  },
  componentDidMount(){
    var jsonData = Car.data;
    var dataBlob = {}, sectionIDs = [], rowIDs = [], cars = [];
    for(var i=0; i<jsonData.length; i++){
      sectionIDs.push(i);
      dataBlob[i] = jsonData[i].title;
      cars = jsonData[i].cars;
      rowIDs[i] = [];