javascript - ReactNative ListView setting initial scroll position after data loaded - Stack Overflow

admin管理员组

文章数量:1302429

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

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?

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./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?

• javascript
• react-native
• react-native-listview
• react-native-scrollview

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Jul 18, 2016 at 11:13 TomTom 12.7k1414 gold badges7474 silver badges117117 bronze badges 12

• If u store the y positions before the data loaded, so they r irrelevant anymore, right? – gran33 Commented Jul 18, 2016 at 11:23
• The y positions stored are fine and I can scroll to these, the issue is only some of the section headers are rendered due to lazy rendering, so I cant scroll to items further down the list – Tom Commented Jul 18, 2016 at 11:25
• "‘you can’t have your cake and eat it'", If u want lazy loading so this is the meaning of it, u r lazy on loading the whole listView. I assume that even on native (iOS) u'll have this problem. – gran33 Commented Jul 18, 2016 at 11:29
• Just tried setting initialListSize to a huge number, this sort of works, although it then takes ages to load the page. Maybe it wont be so bad in release ... – Tom Commented Jul 18, 2016 at 11:32
• "Just tried setting initialListSize to a huge number" - do NOT do this, it will lead to psychotic stuff. – gran33 Commented Jul 18, 2016 at 11:34

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 6

It looks like this may soon be solved by FlatList which is currently in the experimental folder in the React-Native repo.

https://github./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:

• Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
• No 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, e.g. graphql data where you want to map id to key. Note the underlying VirtualizedList is much more flexible.
• Fancy scrollTo functionality: scrollToEnd, scrollToIndex, and scrollToItem in addition to the normal scrollToOffset.
• Built-in pull to refresh support - set set the onRefresh and refreshing props.
• Rendering additional rows is usually done with low priority, after any interactions/animations plete, unless we're about to run out of rendered content. This should help apps feel more responsive.
• Component props replace render functions, e.g. ItemComponent: ReactClass<{item: Item, index: number}> replaces renderRow: (...) => React.Element<*>
• Supports dynamic items automatically by using onLayout, or getItemLayout can be provided for a perf boost and smoother scrollToIndex and scroll bar behavior.
• Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power es from the viewablePercentThreshold that lets the client decide when an item should be considered viewable.

Demo:

本文标签： javascriptReactNative ListView setting initial scroll position after data loadedStack Overflow