bolan9999 / react-native-largelist Goto Github PK
View Code? Open in Web Editor NEWThe best large list component for React Native.
Home Page: https://bolan9999.github.io/react-native-largelist/
License: MIT License
The best large list component for React Native.
Home Page: https://bolan9999.github.io/react-native-largelist/
License: MIT License
目前RN没有一个好用的自定义上下拉,或者是已没有维护了。推荐作者后续可以添加一下
Seems like there's an error when i tried to run using react-native run-ios
Here's the error log that i get
1 error generated.
** BUILD FAILED **
The following build commands failed:
CompileC /Volumes/Workspace/react-native-largelist/ios/build/Build/Intermediates.noindex/RCTNetwork.build/Debug-iphonesimulator/RCTNetwork.build/Objects-normal/x86_64/RCTNetworkTask.o RCTNetworkTask.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
CompileC /Volumes/Workspace/react-native-largelist/ios/build/Build/Intermediates.noindex/RCTSettings.build/Debug-iphonesimulator/RCTSettings.build/Objects-normal/x86_64/RCTSettingsManager.o RCTSettingsManager.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(2 failures)
Installing build/Build/Products/Debug-iphonesimulator/LargeListDemo.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/LargeListDemo.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
My react native version
react-native-cli: 2.0.1
react-native: 0.50.4
node: 9.1.0
npm: 5.5.1
当在 renderHeader 属性 中加入元素的时候 上拉加载不起作用了没有回调,去掉后是正常的
How do i load more data from an Api when list gets to the bottom. I tried
onLoadMore={()=> {
this.makeRemoteRequest();
}
it didnt work.
Great work with the larget list, however we are still not satisfied with the performance. So we tried to use native option, rendering works great but the cells don't receive their own touch events for some reason.
Running on latest 1.1.0 release.
It's a TouchableOpacity we've added to the cell and in another cell it's a horizontal scrollview. Only cell selection works.
Hi,
thanks for this component.
I have a problem with section: sometimes the section is rendered.
I'm using:
My code:
<Container>
<Header hasSubtitle>
<Left>
{this._renderLeftHeaderButton()}
</Left>
<Body style={{ flex: 3 }}>
<Title>Ricordi</Title>
{this._renderSubtitle()}
</Body>
<Right>
{this._renderRightHeaderButton()}
</Right>
</Header>
<LargeList
style={{ flex: 1 }}
//safeMargin={600}
numberOfRowsInSection={section => this.state.momentList[section].data.length}
numberOfSections={()=> this.state.momentList.length}
heightForCell={(section, row) =>{ return 50 }}
renderCell={(section) => {
return (
<View
style={{
flex: 1,
backgroundColor: "blue",
justifyContent: "center",
alignItems: "center"
}}
>
<Text>
CELL
</Text>
</View>
);
}}
heightForSection={section => { return 100 }}
renderSection={section => {
return (
<View
style={{
flex: 1,
backgroundColor: "yellow",
justifyContent: "center",
alignItems: "center"
}}
>
<Text>
I am section {section}
</Text>
</View>
);
}}
/>
</Container>
How can I fix? Thanks
Is there any plans to support the inverted
boolean similar to FlatList?
Is this Component have ItemSeparator ? I feel this component is very useful of me. but when I transfer my program I found that the doc miss ItemSeparator....
Hi,
I'm implementing largelist and I found that any row will just show if all rows are render. Or maybe I'm just doing something wrong ... Maybe because I'm using native-base to make my views ? I really don't know.
My array have ~240 items.
Here is a video of it:
I think rows should show as they render, not after all are rendered.
Code:
import { Content, Text, ListItem } from "native-base";
renderItemLarge(section, row) {
let item = this.props.array[row];
//console.log('render ' + row);
return (
<ListItem onPress={() => this._handleClickIndex(row)} style={{ backgroundColor: 'transparent' }}>
<Text>
{item.loc}
...
</Text>
</ListItem>
);
}
renderLargeList() {
const { array } = this.props;
if (!fetched) {
return (
<View>
...
</View>
);
} else {
return (
<Content>
<LargeList
numberOfRowsInSection={() => array.length}
heightForCell={() => 90}
renderCell={this.renderItemLarge.bind(this)}
/>
</Content>
);
}
}
Versions:
Created LargeList Component through
const AnimatedFeedScrollView = Animated.createAnimatedComponent(LargeList);
and used it with
onScroll = {Animated.event(
[
{
nativeEvent: {
contentOffset: { y: this.myScrollYVar }, // not works
},
},
],
{
useNativeDriver: true, // maybe problem with this?
listener: event => {
console.log(event.nativeEvent.contentOffset.y); // it works
if (event.nativeEvent.contentOffset.y <= 0) {
// code
}
},
}
)}
but I cannot make it work,
any suggestions.
My list shows but does not scroll unless put in scrollview.
My render code.This does not scroll
render() {
return (
<View style={{ flex: 1 }}>
{this.props.Homedata.postsloading&& <ActivityIndicator size='large' animating />}
<LargeList
bounces
style={{ flex: 1 }}
safeMargin={600}
numberOfRowsInSection={section => this.itemsdata[section].data.length}
numberOfSections={()=>this.itemsdata.length}
heightForCell={() => 350}
heightForSection={section => 70}
renderHeader={this.sectionheader}
renderCell={this.examplerender}
showsVerticalScrollIndicator
heightForLoadMore={()=> 100}
onScroll={this.handleScroll}
onLoadMore={()=> {
console.log('load more')
// if(this.props.Homedata.floading) return;
this.makeRemoteRequest();
}
}
renderSection={section => {
return (
<TouchableOpacity delayPressIn={70} activeOpacity={0.8} style={{ padding: 20, height: 70 }} >
<View>
<Text style={{fontSize: 18, fontWeight: 'bold'}} > {this.capitalizeFirstLetter(this.itemsdata[section].title)} </Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
}
Hi,
Thanks for adding behaviour for "keyboardShouldPersistTaps" to the list.
But this is not working on any platform. I'm passing the prop "keyboardShouldPersistTaps" to the list, and giving "handled"(any type is not working eg. "always", "never", "true", "false") but not working yet.
Am I doing anything wrong?
Steps to reproduce -
<LargeList
ref={ref => (this.indexes = ref)}
numberOfSectionPoolSize={20}
style={{ flex: 1 }}
numberOfSections={() => this.props.data.length}
numberOfRowsInSection={(section) => this.props.data[section].child.length}
heightForCell={this.heightForCell}
heightForSection={() => 39}
keyboardShouldPersistTaps={"handled"}
renderItemSeparator={() => null}
onLargeListDidUpdate={() => this.setState({ loading: false })}
/>
How to fix this?
RN version - 0.51.0
react-native-largelist version - 1.2.6
Hi,
I am trying to implement the pagination with largelist , but onLoadMore prop is not working . callBack doesn't print the console message.
<LargeList
ref={ref => (this.root = ref)}
style={{ flex: 1 }}
bounces={true}
numberOfRowsInSection={section => list.length}
heightForCell={() => 220}
renderCell={(section, row) => <Card data={list[row]} navigation=
{this.props.navigation} />}
renderItemSeparator={() => null}
numberOfCellPoolSize={15}
speedLevel1={20}
numberOfSectionPoolSize={1}
onRefresh={() => this._onRefresh()}
refreshing={this.state.refreshing}
onLoadMore={() => {
setTimeout(() => {
this.forceUpdate();
this.root.reloadData();
console.log("load more called")
}, 1000);
}}
heightForLoadMore={() => 220}
/>
RN :0.51.0
react-native-largelist: 1.2.6,
在iPhone X 下来刷新后 顶部会留下空白, 无法回到顶部, 这个改如何解决呢, 其他机型正常, 大约是一个iPhone X导航栏的高度, 偏移了 88
Is it possible?
please
There's onLoadMore
call back that is invoked when pull up on the bottom.
But can we extend or add more callback that going to be invoked when pull up on the top?
You may saw that some of ListView shows loading spinner at the header when user try to pull up on the top.
Thanks
Kudos to this nice list you made. 👍 👍
Can there be any behavior like "keyboardShouldPersistTaps"? Like that in Flatlist/SectionList given by react native.
Currently when the keyboard is opened and you tap on any list item, first the keyboard is closed and another tap is required to actually select the item.
Steps to reproduce:
Again, thanks for making performant lists in react native.
你好 运行例子的确性能很好,没有卡顿问题,可不可以在Android&&ios上实现下拉刷新功能呢?
FlatList and SectionList supports multi-columns.
https://facebook.github.io/react-native/docs/flatlist.html#numcolumns
IMO, it's the last piece of important feature to support now. Thanks.
我的 FlatList 里每个 item 就一张图片,一小段文字,俩按钮(下载和删除)。
不知道为什么 FlatList 就是卡的要死(RN 0.52 + Android)
搞了几天,后来换成 LargeList 问题就好了。
特此感谢。
(请随意关闭此 issue)
Hi,
i'm trying to use this library because i have a large list so.. at first glance i was perfect and really fast, but when i scroll at the bottom of the list i see some blank rows.
this is my code:
<LargeList
style={{ flex: 1 }}
numberOfRowsInSection={section => this.sectionsInSections[section].info.length}
numberOfSections={() => Object.keys(this.sectionsInSections).length}
heightForCell={() => this.ITEM_HEIGHT}
heightForSection={() => this.ITEM_HEIGHT}
renderCell={this.renderItem2}
renderSection={this.renderSectionHeader2}
renderItemSeparator={() => <ListSeparator />}
/>
renderItem2 and renderSectionHeader2 only returns a and this.ITEM_HEIGHT is 40.
Don't know if this is important but LargeList is wrapped inside this component https://github.com/skv-headless/react-native-scrollable-tab-view
Thank you
Hi,
i have a problem reloading data in my large list.
My large list shows a list of status [accepted/not accepted] and a button to toggle that status.
When i click the button i toggle the status of that row updating my list but the row doesn't re-render and the status always remain the previous status also if the data list changed.
I've tried using reloadData()
, and in fact i see the section header blink so the list is reloading, but the row remain unchanged.
Can you help me?
上拉加载完成后没有相应的方法关闭加载图标
loadMore之后,下一页没有数据时候,没有办法隐藏ActivityIndicator的加载图标
I have a list with a single section and an array of rows that dynamically changes length. It looks like the list isn't getting updated when the array length changes, even when the list container is getting re-rendered.
滑动section悬浮之后,再滑到顶,下拉section布局盖住了下拉刷新动画
每一个section拥有的cellrow 数量不一样 要怎么使用 numberOfRowsInSection没找到正确的使用方法!求指导
This is how I setting the largelist:
<LargeList
style={{ flex: 1 }}
bounces={true}
refreshing={this.state.refreshing}
onRefresh={() => this.refreshData()}
safeMargin={600}
numberOfRowsInSection={section => this.state.listlength}
numberOfSections={()=>this.state.listlength}
heightForCell={(section, row) => row % 2 ? this.minCellHeight : this.maxCellHeight}
renderCell={this.renderItem.bind(this)}
heightForSection={section =>section % 2 ? this.minSectionHeight : this.maxSectionHeight}
// renderHeader={this.renderHeader.bind(this)}
renderFooter={this.Loadmore}
/>
and this is the renderitem method :
renderItem(section: number, row: number) {
console.log('large list', section,row);
let data = this.state.data;
const { navigate } = this.props.navigation;
return (
<TouchableOpacity onPress={() =>
navigate('Viewdeal', { data: data[row] })
}>
<View style={styles.Listitem}>
<Text>test</Text>
</View>
</TouchableOpacity>
)
}
Problem is the method seem not fired. I not seeing the console log data at all.
Why is this happens?
报下面的错是什么原因?
Warning: Native component for "STTVCellView" does not exist
Warning: Native component for "STTVCellContainerView" does not exist
Warning: Native component for "STTVSectionView" does not exist
Warning: Native component for "STTVTableView" does not exist
Warning: Native component for "STTVHeaderView" does not exist
Warning: Native component for "STTVFooterView" does not exist
scrollview have an attribute : contentOffset, it can set initial position, I guess I need it :)
Sometimes we have different height for each components, and it's not good for us to define the height one by one, is this support for dynamic height?
Hello,
Up to version 1.2.3 this module works well, the time it takes to first render is rather short. However upon updating to version 1.2.4 (haven't tried 1.2.5 yet) I noticed a HUGE drop in performance that I can't explain (on device and emulator, debug and prod): The list takes a long time to render, and what's more, the whole navigation is affected (going to a route is noticeably slower if it contains a largelist)
I am using react-navigation for routing, I'm not sure if it's related to the problem.
So far v1.2.3 is working well for me and I don't intend to update anytime soon. Just wanted to let you know.
我在用 RN 0.52 ,FlatList 有大概 40+ 个元素,非常卡。
想用 LargeList 替换掉 FlatList,结果得倒腾半天,现在还在倒腾.
希望能提供一些示例,比如能直接替换掉 FlatList 的 LargeList 代码。越简单越短越好。方便复制粘贴。
After going through the API, it seems like it's really possible to make this lib a drop-in replacement for FlatList. What do you think? Thanks.
Maybe the only missing feature is multi-column?
Why dont you contribute to RN instead of creating new repos?
The library will be support for numColumns?
I replace FlatList with this lib and is really faster, but I need a grid view, and I can't found how to do it with the lib.
Thanks
Hi,
I have a large list implementation whose data source is an array in my redux state. On scrolling down to the bottom my "onLoadMore" method gets called which contains the network call to fetch the data and append to my data source in redux state. Now, what happens is that I can see more scrolling space but there is no actual data rendered. I can only see the white screen below my initial data or say the blank scrolling space below my initial data.
Maybe this will give you some idea --
onLoadMore={() => {
this.appendPaginatedData();
this.forceUpdate();
this.root.reloadData();
}}
heightForLoadMore={() => 100}
appendPaginatedData() {
this.setState({ skip: this.state.skip + this.state.limit });
this.props.paginatedApi(this.getSearchParams(this.state.limit, this.state.skip));
}
my this.appendPaginatedData() method contains the actual network call to fetch the data and append to my data source in redux state.
What is going wrong? Why is this not able to render the new data?
the first until third example fail to apply,
例如当有头部组件,但是section和row数量都为0的时候渲染组件宽高大小的空视图
android中Section头部经常性消失,我想用它做城市选择器,可以每次滑动多的时候就回出现Section头部消失的现象,很让人难过
There is a gray background in this component which I cannot locate inorder to disable as it recks my design
onRefresh 是否支持自定义事件、视图?
因为有可能下拉后,并不是要刷新,而是顶部加载。
例如:今日头条,下拉刷新后,滚动到新加载的N条内容结尾,会有一个文字按钮[刚刚看到这里 点击刷新],点击后回到顶部刷新新的数据(下拉加载)
import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { LargeList } from "react-native-largelist";
export default class LogsScreen extends React.Component {
constructor(props) {
super(props);
this.haha = [{ key: 1, title: 'nice' }, { key: 2, title: 'hello' }, { key: 3, title: 'world' }]
}
render() {
return (
<View style={{flex: 1, backgroundColor:'#fff'}}>
<LargeList
style={{ flex: 1}}
bounces={true}
safeMargin={600}
numberOfRowsInSection={section => 3}
heightForCell={(section, row) => row % 2 ? 100 : 100}
renderCell={this.renderItem.bind(this)}
heightForSection={section => section % 2 ? 0 : 0}
/>
</View>
);
}
renderItem(section, row) {
let food = this.haha[row];
return (<View style={{flex: 1}}>
<Text>{food.title}</Text>
</View>)
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.