ReactNative ListView setting initial scroll position after data loaded
I have an events section which has section headings containing the date. I need to be able to jump to specific dates, as well as have the initial scroll position set to the first date in the future.
In order to jump to specific dates I have tried storing their y positions in state.
renderSectionHeader= (sectionData, sectionID) => (
<View
onLayout={(event) => {
const { y } = event.nativeEvent.layout;
const sectionPosition = { [sectionID]: y };
const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition);
this.setState({ sectionPositions });
}}
...
I ran into problems with this approach though as renderSectionHeader is not called on elements which are further down the list (due to the lazy rendering).
I have then tried calculating the position mathematically , but this then causes the rendering of each section to show on screen while it is moving closer to the given date.
Is there a way of achieving what I need?
RELATED
React Native ListView: How to scroll to a particular row
https://github.com/facebook/react-native/issues/499
UPDATE
In my app I know all the rows are the exact same height.
Using contentOffset={{ y: offsetY }}
rather than setScroll
does not work, since it still needs to render all items up to the given item to work.
Using initialListSize={99999999}
does work, but makes the page very slow, and I have been warned against using it.
UPDATE 2
Is it possible to provide my initial content to datasource, and then update the data to add extra items in before and after the elements currently on screen?
Or is there a library I haven't found which does what I need?
It looks like this may soon be solved by FlatList which is currently in the experimental folder in the React-Native repo.
https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js
Better ListView - FlatList Summary: We really need a better list view - so here it is!
Main changes from existing ListView
:
DataSource
- just a simple data
prop of shape Array<any>
. By default, they are expected to be of the shape {key: string}
but a custom rowExtractor
function can be provided for different shapes, eg graphql data where you want to map id
to key
. Note the underlying VirtualizedList
is much more flexible. scrollTo
functionality: scrollToEnd
, scrollToIndex
, and scrollToItem
in addition to the normal scrollToOffset
. onRefresh
and refreshing
props. ItemComponent: ReactClass<{item: Item, index: number}>
replaces renderRow: (...) => React.Element<*>
onLayout
, or getItemLayout
can be provided for a perf boost and smoother scrollToIndex
and scroll bar behavior. viewablePercentThreshold
that lets the client decide when an item should be considered viewable. Demo:
链接地址: http://www.djcxy.com/p/35194.html上一篇: 检查S3文件是否已被修改