Question

我正在使用Firebase child_added列出数据。每次呈现第一行时，都会触发onEndReached。我的代码有问题吗？

组件

onEndedReached() {
 lastkey = Object.keys(this.props.contacts).pop();
 // this.props.nextPage(this.props.auth.uid, lastKey);
 console.log('Fire onEndedReached:', lastkey);
}

render() {
 return (
  <ListView
    style={styles.container}
    enableEmptySections
    dataSource={this.dataSource}
    renderRow={this.renderRow}
    onEndReachedThreshold={50}
    onEndReached={() => this.onEndedReached()}
  />
 )
 }
}

动作

export const getContacts = (uid) => {
  return (dispatch) => {
    firebase.database().ref(`userContacts/${uid}`)
      .limitToFirst(20).on('child_added', (contact) => {
      dispatch({
        type: GET_CONTACTS_SUCCESS,
        payload: { [contact.key]: contact.val() }
      })
    })
  }
}

减速

const INITIAL_STATE = {};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_CONTACTS_SUCCESS:
      return Object.assign({}, state, action.payload );
    default:
      return state;
  }
}

Answer 1

只需在你不想激活onEndReached函数时添加安全措施。

例如，

。当您刷新列表视图或获取数据或当前数据的长度不符合触发endReached的要求时。把所有这些都放在了状态。

if( this.state.isEndCountZero || this.state.skip < 15 || this.state.onEndReached || this.state.refreshing || this.state.isLoading) { return; }

Answer 2

注意 onEndReachedThreshold 参数。

离结尾有多远（以列表的可见长度为单位）列表的下边缘必须从内容的结尾才能触发 onEndReached回调。因此，值0.5将触发 onEndReached当内容的结尾在可见的一半之内列表的长度。

也许你应该把它设置得少一些。

当呈现第一行时，React native onEndReached始终触发

2 个答案: