你如何使用React Native进行无限滚动?

时间:2016-09-02 04:22:47

标签: reactjs react-native infinite-scroll

我有一个名为DataList的可滚动列表,它根据代码进行映射。 index.js中有一个调用,它将更新列表以在DataList中显示更多项。如何修改滚动视图以实现无限滚动,当用户滚动到DataList上的某个点时,该滚动将调用该函数?

const mapStateToPropsDataList = (state) => {
  return {
    dataListItems: state.resource.dataListItems
  }
}

const mapDispatchToPropsDataList = (dispatch) => {
  return {
    read: ()=>{ resourceRead(); }
  }
}

let DataList = ({dataListItems}) => {
  var _scrollView: ScrollView;
  return (
    <View style={styles.dataListBox}>
      <View style={styles.dataListWrapper}>
        <DataListToolbar/>
          <View style={styles.dataListContentBox}>
            <View style={styles.dataListContentWrapper}>
              <ScrollView ref={(scrollView) => { _scrollView = scrollView; }}
                scrollEventThrottle={200}>
                <List>
                  {dataListItems.map((items,index)=>(
                    <div>
                      <ListItem>
                        <div className="listItemBox">
                          <div className="listItemWrapper">
                            <div className="listItemImageBox">
                              <img src={items.image}/>
                            </div>
                            <div className="listItemTextBox">
                              <div className="listItemTextWrapper">
                                <div className="listItemTextTitleBox">
                                  <div className="listItemTextTitleWrapper">
                                    <span>{items.id}</span>
                                  </div>
                                </div>
                                <div className="listItemTextDescriptionBox">
                                  <div className="listItemTextDescriptionWrapper">
                                    <p>{items.name}</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </ListItem>
                    <Divider/>
                  </div>
                  ))}
                </List>
              </ScrollView>
            </View>
          </View>
      </View>
    </View>
  )
}
// modify this code for DataList

DataList = connect(
  mapStateToPropsDataList,
  mapDispatchToPropsDataList
)(DataList)

0 个答案:

没有答案