代码之家 › 专栏 › 技术社区 › CuriousPaul

如何使用firebase数据库(react native)在listview结尾添加“加载更多内容”

expo firebase-realtime-database react-native listview javascript

CuriousPaul · 技术社区 · 6 年前

我有一个firebase数据库,其中有很多组件,通常需要很长的时间,才能在我正在使用expo构建的应用程序的活动中一次加载。

我在想,在每5个项目后用“see more”或“load more”对活动分页会使它更快,但我不知道如何做到这一点。我试过: size: 1, firstVisibleRow: 0, leastVisibleRow: 0, greatestVisibleRow: 0, itemsToShow: 1, rowsToDisplay : 1, expanded: false ,在代码中的不同位置,但它们都不起作用。

有谁能帮我用ListView解决这个问题吗?我附上以下主要代码:

import React from 'react';

import {
  ListView,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  AlertIOS
} from 'react-native';
import {
  Constants
} from 'expo';
import firebase from './firebase';

const StatusBar = require('../Firebase/StatusBar');
const ActionButton = require('../Firebase/ActionButton');
const ListItem = require('../Firebase/ListItemEventsNew');
const styles = require('../Firebase/styles.js');

export default class Events_new extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      //size: 1,
      //firstVisibleRow: 0,
      //leastVisibleRow: 0,
      //greatestVisibleRow: 0,
      //itemsToShow: 1,
      //rowsToDisplay : 1,
      //expanded: false
    };
    this.itemsRef = this.getRef().child('-Events');
  }

  getRef() {
    return firebase.database().ref();
  }

  listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        items.push({
          headline: child.val().headline,
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items),
        //itemsToShow: 1,
        //rowsToDisplay : 1,
        //expanded: false
      });

    });
  }

  componentDidMount() {
    this.listenForItems(this.itemsRef);
  }

  render() {
    return ( <
      View style = {
        styles.container
      } >
      <
      StatusBar title = "Events" / >
      <
      ListView dataSource = {
        this.state.dataSource
      }
      renderRow = {
        this._renderItem.bind(this)
      }
      enableEmptySections = {
        true
      }
      style = {
        styles.listview
      }
      />

      <
      /View>
    )
  }

  // <ActionButton onPress={this._addItem.bind(this)} title="Add" /> pt butonul Add

  _addItem() {
    AlertIOS.prompt(
      'Add New Item',
      null, [{
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
        },
        {
          text: 'Add',
          onPress: (text) => {
            this.itemsRef.push({
              title: text
            })
          }
        },
      ],
      'plain-text'
    );
  }

  _renderItem(item) {

    const onPress = () => {
      AlertIOS.alert(
        'Complete',
        null, [{
            text: 'Complete',
            onPress: (text) => this.itemsRef.child(item._key).remove()
          },
          {
            text: 'Cancel',
            onPress: (text) => console.log('Cancelled')
          }
        ]
      );
    };

    return ( <
      ListItem item = {
        item
      }
      onPress = {
        onPress
      }
      />
    );
  }

}

1 回复 | 直到 6 年前

tuledev 6 年前

你可以发现 卷轴到达底部 = & gt; 获取更多数据 = & gt; 变化状态 = & gt; 显示更多行

onEndReached={this.loadMoreActivities}

loadMoreActivities = () => {
  // fetch data here
}

你应该用 debounce 为了优化。关键字 debounce lodash