Skip to content

🔥原生列表,高性能,大数据,无白屏和卡顿

License

Notifications You must be signed in to change notification settings

vickness/react-native-vk-list

Repository files navigation

react-native-vk-list

高性能原生列表,iOS端使用 TableView,Android端使用 ListView
集成下拉刷新和上拉加载,iOS使用 MJRefresh,Android端使用 SmartRefreshLayout

安装

只支持 react-native >= 0.60 (autolinking)

yarn add react-native-vk-list  
cd ios
pod install

使用

const TableViewHeader = props => {
    return (
        <View>
        </View>
    );
};
AppRegistry.registerComponent('TableViewHeader', () => TableViewHeader);
const TableViewFooter = props => {
    return (
        <View>
        </View>
    );
};
AppRegistry.registerComponent('TableViewFooter', () => TableViewFooter);
const TableViewRow = props => {
    return (
        <View>
        </View>
    );
};
AppRegistry.registerComponent('TableViewRow', () => TableViewRow);
<TableView
    style={{flex: 1}}
    ref={o => this.tableView = o}

    rowModule={"TableViewRow"}
    rowHeight={200}
    rowData={this.state.rowData}

    headerModule={"TableViewHeader"}
    headerHeight={150}
    headerData={this.state.headerData}

    footerModule={"TableViewFooter"}
    footerHeight={60}
    footerData={this.state.footerData}

    onHeaderRefresh={this._onHeaderRefresh}
    onFooterRefresh={this._onFooterRefresh}

    showSeparator={false}
/>
this.tableView.startHeaderRefresh();

this.tableView.stopHeaderRefresh();

this.tableView.startFooterRefresh();

this.tableView.stopFooterRefresh();

this.tableView.stopFooterRefreshWithNoData();