+1
정확히 같은 문제가 발생합니다. 0.5에서는 작동했지만 0.6에서는 중단되었습니다.

이것은 0.7에서 수정되어야 합니다.

나는 똑같은 문제를 경험했습니다.

cloneWithRows는 잘 작동합니다. 그러나 cloneWithRowsandSections는 그렇지 않습니다.

cloneWithRowsandSections가 0.7에서 작동하지 않는 것이 보입니까?

또한 initialListSize를 더 큰 숫자로 설정하려고 할 수도 있습니다. 이는 0.7에서 문제가 해결되지 않은 경우 해결 방법으로 도움이 될 수 있습니다.

더 큰 initialListSize는 도움이 되지 않으며 0.7 벤더 종속성 때문에 아직 시도하지 않았습니다. 누군가가 더 빠르지 않을 경우 가능한 한 0.7에 대해 알려 드리겠습니다. :)

버전 0.6의 cloneWithRows와 동일한 문제가 0.5에서 작동했습니다.

0.7에서는 시도하지 않았습니다. 시도해 볼 것입니다. 나는 또한 이전에 initialListSize를 더 높은 숫자로 설정하려고 시도했지만 도움이 되지 않았다는 것을 알고 있습니다.

0.7에서 작동

0.7.1에서도 작동하지 않음

버전 0.7.1의 cloneWithRows와 동일한 문제가 있음

나를 위해 그것은 0.7.1에서 잘 작동합니다.

0.8.0에서는 작동하지 않습니다.

아직 사용 cloneWithRows 대신 cloneWithRowsAndSections

cloneWithRows 이(가) yamill에 적합합니까? 0.8.0에서는 그렇지 않습니다.

@coderdave는 실제로 cloneWithRows 도 작동하지 않습니다. 내 실수.

@sahrens @ide @michalraska 내 scrollY 소품이 업데이트되지 않았습니다. 기본적으로 다음과 같이 스크롤 오프셋을 구성 요소에 전달하려고 했습니다.

    renderRow: function (rowData, sectionID, rowID) {
          return (
            <Row
            key={rowData.id} data={rowData} scrollY={this.state.contentOffset}
             />
          )
    });

그러나 이 줄을 수정하면 내 구성 요소에 대한 scrollY 소품을 성공적으로 받을 수 있습니다. 이 변경으로 다른 모든 문제가 해결되는지 궁금합니다.

https://github.com/facebook/react-native/blob/757d6d204ae2d743634af64e3f78a4aad9d53f70/Libraries/CustomComponents/ListView/ListView.js#L342 -L343

나는 그것을 다음에서 변경했습니다.

var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount && dataSource.rowShouldUpdate(sectionIdx, rowIdx);

에게

var shouldUpdateRow = true;

0.11.0-rc에서도 이것을 발견했습니다.

다음은 문제를 재현할 수 있는 두 가지 예입니다.

행: https://rnplay.org/apps/d3DM6A
행 + 섹션: https://rnplay.org/apps/xnyaYw

내가 생각해낸 임시 해결책은 ListView 1pt가 마운트될 때 스크롤하는 것입니다.

let listViewScrollView = this.refs.listView.getScrollResponder();
listViewScrollView.scrollTo(1);

테스트를 위해 rnplay.org의 예제 내에서 이 섹션의 주석을 제거할 수 있습니다.

어리석은 질문. 이것은 NavigatorIOS를 사용하는 것과 관련이 있습니까? 목록 보기가 NavigatorIOS의 자식으로 렌더링될 때 렌더링, 패딩 등의 문제가 있었습니다.

@jaygarcia 예제에서는 NavigatorIOS를 사용하지 않기 때문에 그렇게 생각하지 않습니다. 또한 내 프로젝트에서 NavigatorIOS 대신 Navigator를 사용하고 있습니다.

+1, 현재 Navigator를 사용할 때 이 동작이 발생하고 있습니다. 저는 0.11이고 cloneWithRows를 사용합니다.

해결 방법으로 @christopherdro 의 솔루션을 사용해야 했지만 항목을 렌더링하려면 충분히 스크롤해야 합니다(크기가 큼).

흥미롭게도 해결 방법은 이 버그에 대한 해결 방법과 관련이 있습니다. https://github.com/facebook/react-native/issues/1878 따라서 최종 코드는 다음과 같습니다.

    listViewScrollView.scrollWithoutAnimationTo(80);
    listViewScrollView.scrollWithoutAnimationTo(-80);

좋아, 위에서 언급한 코드를 사용하여 중첩된 ScrollViews에 몇 가지 기이한 버그가 있습니다. 마운트 후 해당 보기에서 초기 스크롤 오프셋의 위치를 ​​변경하는 onScroll 이벤트가 트리거되었습니다.

여전히 0.12.0의 버그입니다. 다음은 보기 계층 구조입니다.

0.11.0의 @Sidnicious 와 동일한 문제입니다. 내 앱에는 초기 버전의 react-native부터 이 문제가 있었습니다. Navigator 계층 구조에서 ListView 이동하면 모든 것이 예상대로 작동합니다.

0.13.0-rc 사용하여 동일한 문제를 겪고 있습니다.

0.13.1 과 같은 문제가 있습니다.

    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {dataSource: ds.cloneWithRows(Array.apply(null, {length: 100}).map(Number.call, Number))};
    }
    render() {
        return (
    <ListView
        style={{paddingTop: 20, flex: 1}}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
    />
    )

저에게 이 문제는 0.14.2 에서 0.16.0-rc 업그레이드할 때 나타났습니다. 저에게 효과가 있었던 수정 사항은 ListView의 pageSize 소품을 3으로 설정하는 것이었습니다. 2는 저에게 효과가 없었지만 3은 잘 작동했습니다.

¯_(ツ)_/¯

여기에 0.15.0과 같은 문제가 있습니다. 모든 트릭을 시도했지만 운이 없었습니다. iOS 9.1 아이폰 6

@nicklockwood - 여기서 도와주실 수 있나요? 아직 버그가 있는 것 같습니다.

0.14, 동일한 문제

유사한 LisView 문제 연결: https://github.com/facebook/react-native/issues/4728

다른 유사한 문제 연결: https://github.com/facebook/react-native/issues/4179

나는 이것을 0.16.0에서 보고 있다. Product Pains의 레이더에 이것을 배치한 사람이 있습니까? 이것은 상당히 고통스러워지고 있습니다. :/

나는 이것을 Product Pains 에 게시했습니다. 그것이 여전히 영향을 미치고 있다면 거기에 자유롭게 투표하십시오.

0.16, 동일한 문제

dataSource에서 cloneWithRows를 사용하는 0.17에서도 문제가 계속 발생합니다. 목록은 스크롤될 때만 항목을 렌더링합니다.

0.17에서 이와 동일한 문제를 보았지만 removeClippedSubviews 비활성화하면 문제가 해결된 것 같습니다.

+1
0.17에서 이와 동일한 문제를 보고 있었지만 removeClippedSubviews를 비활성화하면 문제가 해결된 것 같습니다.

나에게 그것은 removeClippedSubviews 유무에 관계없이 0.17에서 여전히 발생합니다. 내가 알아차린 것은 내 문제가 수동으로 설정된 contentOffset 및 initialListSize 와 관련될 수 있다는 것입니다. 오프셋이 initialListSize 대해 렌더링될 요소의 높이를 초과하면 사용자가 스크롤할 때까지 필요한 요소를 렌더링하지 않습니다.

flexDirection: 'row' 설정된 목록에도 문제가 있는 것 같습니다. 이 속성을 제거하면 모든 항목이 렌더링됩니다. 설정된 경우 목록은 처음에 두 항목만 렌더링합니다.

Navigator를 사용할 때 removeClippedSubviews 문제의 경우.
문제가 발생하지 않는 https://github.com/machard/react-native-advanced-navigation 을 확인할 수 있습니다(보기가 실제로 화면에 표시된 후 렌더링이 지연되기 때문일 수 있음).

contentContainerStyle 속성에 설정된 flexDirection: 'row' 및 flexWrap: 'wrap' 에도 문제가 있습니다. 저에게 효과적인 해결 방법은 pageSize 입니다.

반응 네이티브 버전: 0.19.0

@jittuu 가 pageSize 소품을 설정

pageSize를 무엇으로 설정합니까?

@gre 레이아웃에 따라 다릅니다. 보기가 행으로 정렬된 경우 pageSize는 행당 항목의 배수여야 합니다. 정확한 값으로 실험하여 성능에 미치는 영향을 확인할 수 있습니다.

또한 전체 화면을 채울 만큼 충분히 크게 initialListSize를 설정해야 합니다.

이 커밋의 설명이 유용할 수 있습니다. https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu 이것은 나를 위해 일했습니다. flexWrap 사용할 때도 버그가 발생했습니다.

@jittuu 는 pageSize를 값 2로 설정하여 문제를 해결했습니다.

목록 보기에서 스크롤을 수행하고 앱을 탐색하고 돌아갈 때 여전히 문제가 발생합니다.
pageSize가 도움이 되지 않았습니다(1에서 60까지 다른 값을 시도했습니다).

@gre 당신은 initialListSize를 충분히 크게 설정하고 있습니까? 볼 수 있는 repo가 ​​있습니까?

@jaygarcia @nicklockwood 이 버그를 재현하는 데모가 있습니다. URL: ListNotRender

단계:

1. 앱을 엽니다.
2. 탭 표시줄 항목 "#1"을 클릭합니다.
3. 스크롤 할 때까지 목록 항목이 렌더링되지 않습니다.

나는 이 버그가 ListView의 removeClippedSubviews 속성과 관련이 있다고 확신하며 버그는 true로 설정되었을 때만 발생합니다.

이것은 RN 0.26.0에서 여전히 발생하고 있습니다. 같은 상황:

• removeClippedSubviews={true}
• ListView가 화면 밖에서 렌더링됩니다.
• 해당 화면으로 이동할 때 사용자가 상호 작용할 때까지 목록 보기가 미끄러집니다.

cc @javache

나는 이것이 https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e에 의해 수정되었다고 믿습니다.

@javache 수동으로 해당 줄을 로컬에 추가했지만 문제가 해결되지 않았습니다.

나는 또한 이것을 https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 위에 적용했지만 성공하지 못했습니다. ;)

RN 0.28 위에 있는 단일 https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e 커밋은 여전히 ​​버그를 생성합니다.

이것에 대해 조금 조사 하면 ListView가 더 이상 표시되지 않는 경우에도 백그라운드에서(예: 스크롤 업데이트 중) 여전히 업데이트되고 있는지 궁금합니다

사실 뷰에서 스크롤하면 버그를 쉽게 재현할 수 있기 때문에 여전히 'gravity'로 스크롤되고 있을 때 탐색을 수행하고 조금 기다렸다가 뒤로를 클릭합니다. 다시 스크롤 할 때까지 전체 화면은 흰색입니다.
그러나 그것은 기본적으로 이 버그가 나에게 발생하는 유일한 시나리오입니다. 이것은 ~ 모두에게 동일한 재현 시나리오입니까, 아니면 버그가 이보다 더 넓습니까?

그 시나리오는 @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032 에서 그리 멀지 않습니다.

이 버그의 원인을 파악하기는 어렵지만 여기에 제 2센트가 있습니다.

백그라운드에서 행이 _white_ 렌더링되는 것처럼 들립니다. scrollview를 다시 보이게 할 때 _(예: 뒤로 이동)_ 여전히 흰색이고 새로운 스크롤이 발생할 때까지 업데이트되지 않습니다 _(업데이트할 이유가 없기 때문에 캐시됨)_.

ScrollView가 여전히 보이는 경우에만 자식( updateClippedSubviews ?)을 렌더링하면 버그가 수정됩니까? (백그라운드에서 행이 렌더링되지 않으면 다시 흰색으로 표시되지 않습니다)

@javache 1fcd73f는 채우지 않은 하나 또는 두 개의 행으로 ListView의 경우를 수정할 수 있습니다. 이 경우 ListView를 스크롤해도 목록 행을 다시 표시할 수 없습니다.

버그를 재현하는 간단한 방법을 찾았습니다.

1. removeClippedSubViews = true로 ListView를 표시합니다.
2. 행을 터치하여 다음 페이지로 이동합니다.
3. 화면 방향을 90도 회전합니다.
4. 화면을 뒤로 회전합니다.
5. ListView 화면으로 돌아가기

ListView는 비어 있고 화면보다 많은 행이 있고 ListView를 스크롤하면 화면보다 작은 행이 다시 표시되며 스크롤 ListView는 아무 것도 다시 표시할 수 없습니다. 1fcd73f 스크롤 ListView로 다시 표시할 수 있습니다 :)

1. 0.26.3부터 이 문제가 계속 표시됨
2. 내 비 RN 프로젝트에서 기본 Android에서 문제를 보았습니다.

우리가 선택한 솔루션은 scrollTo 1px 앞뒤로 이동을 수행하는 것이었습니다. 해결 방법이지만 두 경우 모두에서 작동했습니다.

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); });

@JBerendes 예 이 해킹이 작동합니다.

다음은 사용자의 스크롤을 손상시키지 않는 보다 정교한 해결 방법입니다.

class ...YourListAbstraction {

  _scrollY = 0;
  _lastTimeScrolled = 0;

  scrollHackToWorkaroundWhiteBug (amount) { // call at appropriated time, with -1 or 1. if possible alternate so you don't change the actual scroll over calls xD
    const { list } = this.refs;
    if (!list) return;
    if (Date.now() - this._lastTimeScrolled < 500) return; // don't mess with user scroll
    list.getScrollResponder().scrollTo({
      y: this._scrollY + amount,
    });
  }

  onScroll = ({ nativeEvent }) => { // give onScroll={this.onScroll} to ListView
    this._scrollY = nativeEvent.contentOffset.y;
    this._lastTimeScrolled = Date.now();
  };

}

ListView 추상화에 넣습니다. 그런 다음 적절한 시간에 scrollHackToWorkaroundWhiteBug 를 호출해야 합니다. 저에게는 화면을 변경할 때마다(전환 전후)입니다.

나는 이것이 ListView의 scrollRenderAheadDistance (터치된 후 렌더링되지 않은 행을 렌더링하기 때문에)와 관련이 있다고 생각하고 scrollRenderAheadDistance 를 1800보다 큰 값으로 설정하여 문제를 해결했습니다. scrollRenderAheadDistance 와 렌더링되는 행 수 사이에는 확실히 상관 관계가 있지만 일관성이 없습니다. 나는 그것이 일반적으로 다음과 같이 렌더링된다는 것을 발견했습니다(때로는 모든 행을 렌더링하지만).

| scrollRenderAheadDistance | 렌더링된 행 수 |
| --- | --- |
| 1000 | 2 |
| 1200 | 2-5 |
| 1400 | 5 |
| 1600 | 6 |
| 1800 | 7+ |

80pt 높이의 행으로 ListView를 렌더링하고 있습니다. ListView에 대해 정확한 scrollRenderAheadDistance 를 설정하는 데 도움이 되는 공식을 도출했습니다.

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

그러나 680 (또는 340 * 2 )의 중요성을 이해하지 못합니다.

편집: 이 솔루션은 디버그에서 작동하지만 릴리스 체계(iOS용)에서는 작동하지 않습니다...

좋아, removeClippedSubviews 를 false로 설정하면 문제가 해결됩니다.

0.26에서 0.29로 업그레이드할 때까지 이 문제가 발생하지 않았으므로 0.27, 0.28 또는 0.29에 도입되었습니다(아직 0.27 또는 0.28에 대해 테스트하지 않았지만 도움이 된다면 할 수 있습니다).

@gnestor 0.29에서 깨졌습니다. #8607 및 https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7을 확인

@gnestor @nihgwu 버그가 최근 퇴행이 아니라고 확신합니다. 이 문제는 1년 전에 생성되었으며 RN 0.13부터 개인적으로 경험했으며 항상 ListView로 "생존"하기 위해 해결 방법을 사용했습니다. removeClippedSubviews 사용하지 않으면 큰 목록이 지연됩니다.
버그를 수정하거나 최소한 버그가 나타나는 경우를 줄이려는 시도가 있었을 수 있지만 이는 이 초기 문제 메시지에서 보고된 것과 거의 유사합니다.

@gre 하지만 여전히 #8607이 0.29에 도입되었다고 생각합니다. 빈 보기로 가는 것은 정말 번거로운 일입니다. https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 의 변경 사항을 되돌리기만 하면 됩니다. removeClippedSubviews 끄지 않고 전에

initialListSize 를 적절한 값으로 설정하고 removeClippedSubviews 를 false로 설정하여 내 문제를 해결하십시오.

0.28에서 0.29로 업그레이드한 후 이 문제가 발생했습니다.
removeClippedSubviews={false} 이 문제를 해결했습니다.
또한 제 경우에는 componentDidUpdate() 에서 ListView height 를 업데이트하고 있습니다.
componentDidUpdate() 의 높이 업데이트 코드를 setTimeout 와 함께 사용자 지정 시간 제한으로 래핑하는 것도 도움이 됩니다.

나는 또한 이것을 경험했지만 로컬 데이터로 채워진 하나의 ListView에있었습니다. 나는 또한 iOS에서만 이것을 보았고 0.29로 업그레이드 한 후에 만 ​​보았습니다. 문제의 ListView는 this.state.dataSource.cloneWithRowsAndSections 하고 componentDidMount 는 로드할 때입니다.

그래서 removeClippedSubviews={false} 문제를 해결했습니다.

ListView 구성 요소에 removeClippedSubviews 를 설정하는 것도 효과적이었습니다. 기본 Navigator 구성 요소를 사용할 때 0.29 의 Release 체계에서만 이 문제가 발생했습니다.

동일한 문제가 있습니다. flexDirection: 'row' 및 flexWrap: 'wrap'을 설정했습니다. 저는 RN 0.29.2를 사용 중입니다. 다른 목록 보기(flexDirection: 'row'를 설정하지 않은 곳)에서는 그 문제가 없습니다.

다른 포스터가 말한 것처럼 빠른 수정은 적절한 initialListSize 및 pageSize를 설정하는 것이지만, 예를 들어 목록 보기 안에 있는 항목 목록의 일부만 표시하는 필터가 있는 경우 앱의 응답성이 떨어질 것이라고 생각합니다. , 목록 보기가 전체 표시 영역을 다시 렌더링하려고 하기 때문에 필터 사이를 탭하면 속도가 느려집니다.

다른 목록 보기에서는 initialListSize=0 pageSize=1을 설정하여 이 문제를 해결했습니다. 그러나 그리드 목록 보기에서는 할 수 없습니다(flexDirection: 'row' 및 flexWrap: 'wrap').

RN v0.31.0-rc.0에서 이것을 치고 있습니다.

removeClippedSubviews={false}를 추가하면 문제가 해결된 것 같습니다.

"removeClippedSubviews={false}"는 좋은 솔루션이 아닌 것 같습니다. 모든 행을 렌더링하고 메모리 관리 문제가 있습니다. "listView. scrollTo" 및 "removeClippedSubviews"를 제외한 더 나은 솔루션이 있습니까?

이 문제는 RN 0.31이 있는 ios 10 베타에서 훨씬 더 심각합니다 :-(

removeClippedSubviews 는 Android에서 도움이 되지 않았고 대신 ListView 에서 ScrollView 로 옮겨야 했습니다.

정말 엄청난 버그입니다. 나도 만났다.

모두가 Product Pains에 대해 찬성하는지 확인하십시오. 그것은 이미 꽤 높지만 아직 누군가의 받은 편지함에 착륙할 만큼 충분히 높지는 않습니다 :-( 여기 링크가 있습니다.

이 시점에서 나는 이것이 아마도 #8607과 같은 문제라고 말하고 싶습니다. 어떻게 대처해야 하는지 내 계획을 확인하십시오.

0.33.0 에 계속 존재

여전히 0.32에 존재

어제 이 버그를 만났고 removeClippedSubviews = {false} 작동했습니다.

0.33에 +1

예, 저도 같은 문제입니다! +1
0.33,
편집하다:
removeClippedSubviews = {false}, 나에게도 문제가 해결되었습니다.

+1

https://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (from #8607) 이 패치를 사용해 보고 이 문제에 도움이 되는지 알려주시겠습니까?

@majak 이 패치를 공유해 주셔서 감사합니다. 우리는 그것을 적용하기만 하면 됩니다. 이제 이 문제는 사라졌습니다(RN 0.34).

@majak 이것은 나에게도 해결되는 것 같습니다. 잘했습니다!

이것은 removeClippedSubviews={true} 일 때 RN34에서 발생합니다.

React Native 0.34에서 이 문제가 발생했습니다.
문제는 다음과 같은 경우에만 발생했습니다.

    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',

목록보기 스타일에.

initialListSize={100}
나를 위해 그것을 고쳤다

@majak 해당 패치로 홍보할 계획이신가요?

@janmonschke 넵 ! 업데이트를 위해 연결된 문제를 따르십시오.

React Native 0.36에서 이 문제가 발생했습니다.

나는 이것이 0.36에서 일어나는 것을 확인할 수 있습니다

디버그 모드에서만 에뮬레이터에서 완벽하게 작동하지만 장치에서는 작동하지 않습니다. 목록은 장치에서 작동하지 않으며 위에서 권장하는 모든 것을 시도했으며 ListView 을 ScrollView 로 바꾸었습니다. 내 Android 장치에서 볼 수 있는 것은 내비게이터뿐입니다. (내비게이터 외부에 목록을 넣으려고 시도한 경우에도)
0.37

0.36에서 여전히 문제를 찾을 수 있지만 해결해 주셔서 감사합니다!

나는 아직도 그것을 0.36.1에서 보고 있다

나는 아직도 그것을 0.36.1에서 보고 있다

0.31에 존재
initialListSize={1} 해결

React Native 0.38에서 이 문제가 발생했습니다.

renderScrollComponent={(props) => <ScrollView style={flex: 1} /> }

이것은 버전 0.38의 문제를 수정합니다. 이전 버전에서도 작동하는지 모르겠습니다.
이 아카이브 버전 0.38의 문제, 초기 버전에서 작동하는지 모르겠습니다.

이 문제는 0.36에 존재합니다.
removeClippedSubviews = {false} 및 initialListSize={8}에서 작동하도록 할 수 없습니다.

1년이 넘었는데 아직도 이 이슈가 열려있나요??

0.39에 여전히 존재합니다. removeClippedSubviews = {false} 작동합니다.

"removeClippedSubviews={false}"는 좋은 솔루션이 아닌 것 같습니다. 새로운 솔루션이 있고 저에게 효과적입니다. 플랫폼 iOS. RCTView.m 파일

PR을 작성해야 합니까?

RN0.40에서 테스트한 사람이 있습니까? RN0.40으로 업그레이드한 후 더 이상 이 문제가 발생하지 않습니다.

이 문제가 있습니다.
1, removeClippedSubViews = true로 ListView를 표시합니다.
2, 행을 터치하여 다음 페이지를 입력하십시오.
3, 화면 방향 90 회전;
4, ListView 화면으로 돌아가기;

ListView는 비어 있고 행이 화면보다 많으면 ListView가 다시 표시됩니다.

@endpress RN0.41RC0 을 사용하여 귀하의 단계를 따랐지만 여전히 재현할 수 없습니다.

0.38에서 이 문제가 발생합니다.

내 해결 방법은 ListView의 paddingTop을 0과 1 사이에서 변경하는 것이므로 ListView가 매번 새로 고쳐집니다.

backgroundColor, 테두리 등을 변경하려고 할 수 있습니다. 다른 속성이 작동하는 경우 알려주십시오.

@nihgwu는 여전히

이것이 문제다

@endpress 변경 사항(https://github.com/facebook/react-native/issues/1831#issuecomment-270552011)이 제 경우에 적용되며 facebook/react-native#8607에도 도움이 될 수 있습니다.
패치가 아직 완벽하지 않을 수 있다는 것을 알고 있지만 여전히 PR을 작성하는 것이 좋습니다.

나를 위해 initialListSize={0}를 설정해도 0.40.0으로 수정됩니다.

@majak 이 치명적인 문제에 좋은 소식이 있습니까?

https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 는 어떻습니까?

FlatList는 아직 실험적이기 때문에 버그가 더 적거나 이전 버전과 호환되지 않는 방식으로 변경된다는 보장은 없지만 위험을 감수하고 시도해 볼 수는 있습니다.

@sahrens @gre 이전 애플리케이션 코드가 동일하게 유지되도록 이전 ListView와 동일한 API를 제공하는 FlatList 위에 추상 레이어를 구축할 수 있습니까?

@sahrens FlatList는 UITableView로 구현됩니까?

FlatList가 안정화되고 더 이상 실험적이지 않으면 ListView와 동일한 API로 어댑터를 만들거나 내부에서 ListView 구현을 교체할 수 있습니다.

UITableView를 사용하지 않습니다. 실제로 새로운 네이티브 코드를 전혀 사용하지 않습니다. 모두 기존 네이티브/프레임워크 프리미티브가 있는 JS입니다. 여기에서 구현을 볼 수 있습니다. https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens 감사합니다. 꽤 멋지고 유용합니다.

@savanthongvanh 초기 크기를 0으로 설정하면 초기 로드 시 ListView의 모든 항목을 렌더링하는 효과가 있습니다. 아이템이 많으면 주의하세요.

또한 이 rn 0.41.2를 처리합니다. 누군가가 내가 복사할 수 있는 FlatList의 간단한 구현을 가지고 있으며 곧 솔루션을 기대하고 있습니다.
감사 해요,
론

FlatList(andVirtualizedList)는 함께 플레이하려는 경우 마스터에 있습니다.

이 문제를 다루는 모든 사람을 위해 FlatList를 시작하는 간단한 방법은 다음과 같습니다. https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

initialListSize를 적절한 값으로 설정하고 removeClippedSubviews를 false로 설정하여 문제를 해결합니다.

감사합니다 @hoperce , removeClippedSubviews 는 저에게 효과적이며 initialListSize 는 고르지 못한 스크롤을 유발합니다.

RN .42가 있고 여기에 FlatList에 대한 실험적 라이브러리가 표시되지 않으므로 이 문제로 (잠시가 아니라) 업그레이드할 수 있을 때까지 멈춥니다.

최신 버전의 RN을 사용하지 않더라도 항상 FlatList 코드를 앱에 복사할 수 있습니다.

FlatList를 사용하여 "돌아갈 때 전체 보기가 흰색이 됨" 버그를 여전히 재현할 수 있습니다. ScrollView와 더 관련이 없는지 궁금합니다.

잠시 흰색이 되는 문제는 FlatList와 완전히 다르며 고유합니다. 우리는 이를 완화하기 위해 노력하고 있지만 비동기 창 렌더링의 까다로운 결과입니다. 이 문제가 언급하는 버그는 사용자가 스크롤할 때까지 초기 렌더링에서 콘텐츠가 표시되지 않는 경우이며 FlatList로 수정되기를 바랍니다.

ListView(및 FlatList)에서도 이 문제가 발생했습니다.

뷰 생성자에서 내 데이터 소스를 []로 재설정한 다음 setTimeout()의 항목 목록으로 재설정하여 목록을 올바르게 렌더링할 수 있다는 것을 방금 발견했습니다.

참고로 내 목록 보기는 TabNavigator의 ReactNavigation StackNavigator에 포함되어 있습니다.

또한 프로그래밍 방식으로 1px 스크롤을 트리거하는 해킹은 여전히 ​​ListView/FlatList에서 모두 작동합니다. 그러나 올바른 수명 주기(일반적으로 화면으로 돌아올 때)에 호출해야 합니다.

@gre :

@gre , 이에 대한 예제 코드가 있습니까? 그리고 ListView를 포함하는 해당 구성 요소에 대한 componentWillMount를 의미합니까?

@ericvicenti - RN의 다른 코드 조각이 많이 필요한 것 같습니다. 혹시라도 다른 곳에서 빌리지 않을까 하는 걱정이 들었습니다. 뽑을 수도 있습니다. 다른 사람들이 사용할 수 있도록 저장소에 던질 수도 있습니다. 허용됩니까?

@sahrens 미안하지만 내 회사 앱에 있지만 재현하기 위해 빈 예제를 만들 수 있습니다!

@natdm 위의 댓글: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 – 이것이 기본 아이디어입니다. 시간이 지남에 따라 스크롤이 시각적으로 누적되지 않도록 -1px와 1px를 번갈아 사용합니다. XD 거대한 해킹

SectionList에 이 문제가 있습니다. 스크롤할 때까지 초기 렌더링 시 비어 있습니다. @sahrens 눈에 보이는 수정 사항이 있습니까?

@smkhalsa 명확한 재현이 있습니까? removeClippedSubviews={false}로 설정합니까?

@sahrens removeClippedSubviews={false}를 설정하면 이 문제가 해결되는 것 같습니다. 이것이 없으면 이 특정 보기로 이동할 때마다 빈 화면이 나타납니다.

나는 새로운 저장소에서 문제를 분리하고 가능한 경우 게시하려고 노력할 것입니다.

저에게도 마찬가지입니다(removeClippedSubviews는 확실히 버그의 방아쇠입니다). react-native-tab-view 내부에 목록이 있는 앱에서 쉽게 재현했습니다. 그러나 더 간단한 예가 그것을 재현할지 모르겠습니다.

https://github.com/facebook/react-native/issues/1831#issuecomment -228775913에서 내 대답의 마지막 두 단락을 참조하십시오.

나는 그것이 그 주변의 무엇이라고 생각합니다 (단지 가설).

(1) 목록은 '경계 상자 밖에 있기' 때문에 배경 탭에서 렌더링됩니다. removeClippedSubviews는 목록이 여기에 없다고 가정하고 아무 것도 렌더링하지 않습니다(흰색).
(2) 탭이 포커스로 이동하고 해당 탭이 <StaticContainer> 와 같은 것을 사용하기 때문에 아무것도 '새로 고침'되지 않으므로 여전히 흰색입니다.
(3) 사용자가 '스크롤'하면 목록 셀이 ​​표시되는지 확인하는 removeClippedSubviews 논리를 새로 고치고 새로 고칩니다.

리드 @gre 감사합니다

RN 0.41.2에 여전히 존재하고 Android는 괜찮습니다. ios10만 있으면 removeClippedSubviews={false}로 설정하면 이 문제를 해결할 수 있습니다. 내 listView는 작기 때문에 큰 문제는 아닙니다. tabNavigator(react-navigation)의 stackNavigator 내부에 있는 listView.

 render() {
    return (
      <View style={{ flex: 1, justifyContent:'center'}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow.bind(this)}
          removeClippedSubviews={false}
        />
      </View>
    );
  }

동일한 문제가 여기에 있습니다. removeClippedSubviews={false} 외에는 추가할 것이 없습니다.

@agentilela 수정 여기에도 같은 문제가 있습니다.

removeClippedSubviews={false} 수정했습니다.

반응 모국어가-지도에서이 문제가 존재 MapView AFAIK는 사용하지 않는 ScrollView 하고와는 아무 상관이 없습니다 ListView .

문제는 여전히 RN44에서 발생하고 있습니다. initialListSize={200} 는 문제를 해결하지만 표시하기 전에 렌더링하는 데 시간이 걸리므로 장기적으로 좋은 해결책은 아니라고 생각합니다. 100개 이상의 행이 있는 목록 보기에서는 분명합니다.

ps removeClippedSubViews={false} 는 내 문제를 해결하지 못합니다

removeClippedSubViews={false} 은(는) ListView 대해 일했습니다.
또한 FlatList 에도 동일한 문제가 있습니다.

ListView/FlatList 및 react-navigation에 동일한 문제가 있습니다.
TabNavigator 옵션의 lazy: true 및 ListView의 removeClippedSubViews={false} 했습니다.

RN 0.44.0에서 버그가 발생했음을 확인할 수도 있습니다.

반응 탐색 + TabNavigator + (ListView 또는 FlatList)를 사용할 때 발생합니다.
탭으로 이동하면 비어 있는 것처럼 보입니다. 조금만 스크롤하면 목록이 표시됩니다.

발생하지 않는 유일한 탭은 TabNavigator의 initialRouteName에 있습니다.

언급했듯이 lazy: true 를 설정합니다. TabNavigator가 이 문제를 해결합니다.

여기에서 동일한 문제, removeClippedSubViews로 수정됨
중복 문제 https://github.com/facebook/react-native/issues/14069에 설명된 대로
도움이 될 수 있다면 https://github.com/jcharlet/react_native_listview_bug 문제를 재현하기 위해 리포지토리를 만들었습니다.

또한 동일한 사용 사례에 대해 'react-navigation' 대신 'react-native-router-flux'를 사용할 때 이 문제가 발생하지 않습니다.

TabNavigator의 반응 탐색에 문제가 있습니다. removeClippedSubViews={false}는 도움이 되지 않습니다.

저에게도 같은 문제입니다. TabNavigator 및 StackNavigator를 해당 탭의 자식으로 사용하고 일반 ListView와 함께 반응 탐색을 사용합니다. RN 0.44 / Expo 17, 그리고 removeClippedSubviews도 lazy도 도움이 되지 않았습니다 :-/

removeClippedSubviews는 IOS 버전을 수정하는 데 도움이 되었지만 Android의 경우 initialListSize를 사용해야 했습니다.

와 함께

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.2",
    "react-navigation": "1.0.0-beta.11"
}

그리고 lazy: true 에서 TabNavigator 의 TabNavigatorConfig 모든 것을 잘 렌더링 :

const AppNavigator = TabNavigator({
  HomeTab: {
    screen: HomeScreen,
    path: '/'
  },
  PeopleTab: {
    screen: PeopleNavigator,
    path: '/people',
  }
}, {
  lazy: true
});

const PeopleList = ({ people }) => {
  return (
    <FlatList
      data={people}
      renderItem={({item}) => <Text>{item.name}</Text>}
    />
  );
};

다음으로 업그레이드
{
"반응 네이티브": "0.44.2",
"반응 탐색": "1.0.0-beta.11"
}
나를 위해 일했습니다. lazy=true는 StackNavigator에 필요하지 않은 것 같습니다.

{
"반응 네이티브": "0.44.2",
"반응 탐색": "1.0.0-beta.11"
}
게으른 = 사실
removeClippedSubViews={거짓}
작동하지 않습니다

이것은 정말 흥미롭습니다. 이 2년 간의 버그가 마침내 언제 닫힐지 보고 싶습니다.

나는 react-native 0.44.2, react-navigation 1.0.0-beta.11로 업그레이드했고 문제의 TabNavigator에서 "lazy=true"를 설정했고 수정했습니다. 아마도 lazy=true를 설정하는 것만으로도 트릭을 수행할 수 있지만 이미 업데이트했습니다.

@jhalborg FlatList & removeClippedSubViews={false}가 있는 목록의 문제를 수정했습니다.

나는 react-navigation을 사용하고 있고 removeClippedSubViews는 다음과 같은 구조로 작동합니다.

모달 스택 -> 현재 탭 스택 -> 탐색 스택이 있는 여러 탭 포함

내 문제는 성능 부족이었기 때문에 상태 값을 기반으로 removeClippedSubViews 값을 만들어 화면 로드 여부에 따라 on/off를 토글할 수 있도록 했습니다.

다른 탭에 있는 동안 다시 로드하는 목록이 있으므로 다음과 같은 것을 사용합니다.

constructor (props) {
   super(props)

   this.state = { removeClippedSubViews: false }
} 

componentDidMount () {
  this.setState({ removeClippedSubViews: true })
}

resetData () {
  const callback = (newRecords) => {
    this.setState({ removeClippedSubViews: true, records: newRecords })
  }

  this.setState({ removeClippedSubViews: false, records: [] }, () => {
    someDataHelper.reloadData(callback)
  })
}

render () {
  return (
    <ListView removeClippedSubViews={this.state. removeClippedSubViews} />
  )
}

잠시 동안 나를 귀찮게했지만 꽤 간단한 솔루션으로 끝났기 때문에 이것이 누군가에게 도움이되기를 바랍니다.

다음과 같은 이유로 이 문제를 종료할 수 있는 것 같습니다.

• 사람들이 지금 FlatList/SectionList를 사용하는 것이 좋습니다. ListView에는 개선 사항이 없습니다.
• 스레드에서 합리적인 해결 방법이 식별된 것 같습니다.

생각?

이거 진짜 버그 아님? 그렇다면 왜 문제를 종료합니까?

이유에 대해:

• FlatList에서도 발생하므로 ListView만의 문제가 아닙니다.

• removeClippedSubViews 제거하는 것은 성능 비용이 있는 해킹처럼 보이지만 합리적인 해결 방법은 아니라고 생각합니다.

이것이 FlatList/SectionList 내에서 여전히 활성 버그인지 확인합니다.

FlatList/SectionList의 성능과 관련된 몇 가지 문제도 있습니다. 이는 일부 사람들이 아직 ListView에서 이동할 수 없다는 것을 의미하며 이미 사용하지 않는 것이 이상하게 보입니다.

위에 게시한 것과 같은 것이 구성 요소 자체에 통합될 수 있습니까?

ListView에서 마이그레이션하는 데 어떤 문제가 있었습니까?

13727

ListView가 더 나은 위치에 대한 세부 사항을 보지 못했습니다. ListView는 그런 작업을 수행하지 않기 때문에 문제가 되는 경우 창 크기를 늘리거나 가상화를 끌 수 있습니다.

계속 진행하기 전에 방금 질문한 질문에 응답할 때까지 기다리고 싶지만 요점은 아닙니다. 이 문제는 여전히 FlatList에서 발생하고 열려 있어야 합니다.

단지 일반적인 커뮤니티 지식을 위한 것입니다.

ListView 행 내에서 Nested ListView, 즉 ListView를 사용하는 시나리오에서 이 문제를 발견했습니다. 내 솔루션은 중첩된 ListView에 removeClippedSubviews={false} 를 적용하여 수정되었습니다.

react-native-cli: 2.0.1
react-native: 0.41.2

iOS 9.x를 실행하는 iPad 3/iPad Mini와 같은 오래된 하드웨어에서 ListView/FlatList/VirtualizedList/WindowedListView(무엇이든)를 사용하여 큰 목록에서 부드럽게 스크롤하는 것은 불가능합니다.

참고: 나는 단순한 목록, 이미지가 없는 행의 텍스트 구성 요소에 대해 이야기하고 있습니다.

누군가는 스크롤이 부드럽고 고르지 않은 7000개의 레코드 데이터 세트와 함께 기능적 예를 공유할 수 있습니다. 모든 속성 구성을 시도하고 운이 없습니다 😢

동의함 - 메모리 관리를 위해 보이지 않는 셀도 지우고 있습니다. 많은 앱에서 이러한 필수 구성 요소가 많은 사용 사례에 대해 성능이 너무 부족하다는 것은 부끄러운 일입니다. 다음 주 정도에 이에 대해 자세히 살펴보고 상당한 성능 향상이 있는지 확인하겠습니다.

2017년 6월 10일 오후 3시 30분 +1000, Ariel Falduto [email protected] 에서 다음과 같이 썼습니다.

iOS 9.x를 실행하는 iPad 3/iPad Mini와 같은 오래된 하드웨어에서 ListView/FlatList/VirtualizedList/WindowedListView(무엇이든)를 사용하여 큰 목록에서 부드럽게 스크롤하는 것은 불가능합니다.
참고: 나는 단순한 목록, 이미지가 없는 행의 텍스트 구성 요소에 대해 이야기하고 있습니다.
누군가는 스크롤이 부드럽고 고르지 않은 7000개의 레코드 데이터 세트와 함께 기능적 예를 공유할 수 있습니다. 모든 속성 구성을 시도하고 운이 없습니다 😢
—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하세요.

멋진 @lprhodes , 여기에서 ~ 200개의 레코드가 있는 FlatList를 사용하는 간단한 사용 사례를 공유합니다. 이 예제는 iOS 9가 설치된 iPad 3에서 고르지 못합니다.

import React, { Component } from 'react';
import {
  FlatList,
  StyleSheet,
  View,
} from 'react-native';
import Expo from 'expo';
import {
  Text,
  ListItem,
  SearchBar,
} from 'react-native-elements';

class Feed extends Component {

  loadFeed() {
    const {data} = this.props;
    const sections = [];
    data.forEach((value, index) => {
      const sectionName = value.name_line_sp;
      const section = sections.find((section) => {
        return section.title === sectionName;
      });
      if (section) {
        section.data.push(value);
      } else {
        sections.push({
          title: sectionName,
          data: [value]
        });
      }
    });
    if (__DEV__) {
      console.log('Sections size', sections.length);
    }
    return sections[0];
  }

  componentDidMount() {
    this.flatListRef.scrollToOffset({
      animated: false,
      offset: 48
    });
  }

  render() {
    const feed = this.loadFeed();
    return (
      <View style={{flex: 1}}>
        <Text h5 style={styles.section_title}>{feed.title} ({feed. data.length})</Text>
        <FlatList
          style={{flex: 1}}
          ref={(list) => { this.flatListRef = list; }}
          debug
          ListHeaderComponent={() => (
            <SearchBar
              lightTheme
              placeholder='Search...' />
          )}
          data={feed.data} // ~217 records
          keyExtractor={(item) => (
            item.code_group
          )}
          renderItem={({ item }) => {
            return (
              <ListItem
                hideChevron
                key={item.code_group}
                title={`${item.name_group_sp}`}
                subtitle={`${item.price_prod}`}
                containerStyle={{ backgroundColor: 'white' }}
              />
            );
          }}
        />
      </View>
    )
  }
}

import catalog from './data/catalog.json'; 

class App extends Component {
  render() {
    const data = catalog;
    return (
      <View style={styles.container}>
        <Text h3 style={styles.title}>Skillcase</Text>
        <Feed data={data} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    margin: 20,
    marginBottom: 10,
    color: 'white'
  },
  section_title: {
    padding: 20,
    color: 'white',
    backgroundColor: '#1976D2',
  },
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#42A5F5',
  },
});

Expo.registerRootComponent(App);

또는 엑스포 uri: exp://8v-xvw.outatime.skillcase.exp.direct :80

감사 해요 !!!

예제 코드에는 문서에서 해결된 많은 나쁜 사례가 있습니다. 예를 들어, 지속적으로 함수를 다시 만들고 다시 바인딩하면 CPU에 부담이 되고 목록 항목이 불필요하게 다시 렌더링됩니다. ListItem 구성 요소가 PureComponent인지 확인하고 여기에 전달된 모든 소품이 불필요한 재렌더링을 방지하기 위해 얕게 동일하게 유지되는지 확인해야 합니다. 앱의 나머지 부분에도 적용하는 것이 좋습니다.

그것은 많은 도움이 될 것이지만 느린 장치에서 완벽한 성능을 보장할 수 없습니다. 웹 브라우저와 같은 다른 앱이 해당 장치에서 얼마나 더 잘 작동합니까?

@outaTiME 또한 각 렌더링에서 loadFeed를 호출해서는 안 됩니다.

@lprhodes 렌더 메서드는 하나만 실행합니다. btw 일부 모범 사례를 사용하여 코드를 업데이트하고 iOS 9가 설치된 iPad 3에서 여전히 고르지 않습니다(iPhone 7에서는 모두 원활함). @sahrens에서 계속 잘못된 작업을 수행하고 있습니까? 조언 감사합니다.

import React, { Component, PureComponent } from 'react';
import {
  FlatList,
  ListView,
  Text,
  StyleSheet,
  View,
} from 'react-native';
import Expo from 'expo';
import {
  ListItem,
  SearchBar,
} from 'react-native-elements';

class FeedRow extends PureComponent {

  render() {
    const item = this.props.data;
    return (
      <Text>{item.name_group_sp}</Text>
    )
  }

}

class Feed extends Component {

  constructor(props) {
    super(props);
    this.storeListRef = this.storeListRef.bind(this);
  }

  loadFeed() {
    const {data} = this.props;
    const sections = [];
    data.forEach((value, index) => {
      const sectionName = value.name_line_sp;
      const section = sections.find((section) => {
        return section.title === sectionName;
      });
      if (section) {
        section.data.push(value);
      } else {
        sections.push({
          title: sectionName,
          data: [value]
        });
      }
    });
    if (__DEV__) {
      console.log('Sections size', sections.length /*, images.length */);
    }
    return sections[0];
  }

  componentDidMount() {
    this.flatListRef.scrollToOffset({
      animated: false,
      offset: 48
    });
  }

  renderItem(item) {
    return (
      <FeedRow data={item.item} />
    );

  }

  keyExtractor(item) {
    return item.code_group;
  }

  listHeaderComponent() {
    return (
      <SearchBar
        lightTheme
        placeholder='Buscar...' />
    );
  }

  storeListRef(list) {
    this.flatListRef = list;
  }

  render() {
    const feed = this.loadFeed();
    return (
      <View style={{flex: 1}}>
        <Text h5 style={styles.section_title}>{feed.title} ({feed. data.length})</Text>
        <FlatList
          style={{flex: 1}}
          ref={this.storeListRef}
          debug
          // pagingEnabled
          ListHeaderComponent={this.listHeaderComponent}
          data={feed.data} // ~217 records
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
        />
      </View>
    )
  }

}

import catalog from './data/catalog.json';

class App extends Component {

  render() {
    const data = catalog;
    return (
      <View style={styles.container}>
        <Text h3 style={styles.title}>Skillcase</Text>
        <Feed data={data} />
      </View>
    );
  }

}

const styles = StyleSheet.create({
  title: {
    margin: 20,
    marginBottom: 10,
    color: 'white'
  },
  section_title: {
    padding: 20,
    color: 'white',
    backgroundColor: '#1976D2',
  },
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#42A5F5',
  },
});

Expo.registerRootComponent(App);

더 좋지만 debug 를 설정하면 작업 속도가 크게 느려집니다. 또한 성능을 평가할 때 개발/디버그 빌드가 아닌 최적화된 프로덕션 빌드를 실행하고 있는지 확인해야 합니다. 마지막으로, 렌더링할 때마다 여전히 새로운 스타일 객체를 생성하고 있으며 onMount에서 scrollToOffset을 호출하는 대신 initialScrollPosition을 사용할 수 있습니다.

@sahrens yup debug 플래그가 없고 최적화된 프로덕션 빌드가 실행되면 덜 고르지 않게 실행됩니다. 반응 네이티브 0.44를 사용하는 엑스포 17을 사용하기 전에 말했듯이, 반응 네이티브(0.45 ) FlatList 에 대한 개선 사항이 있습니다.

btw, 왜 모든 렌더링에서 스타일이 생성됩니까? 이 경우 flex 스타일의 렌더링( Feed 구성 요소에서)은 한 번만 실행됩니다.

1. App 렌더링
2. Feed 렌더링
3. 그런 다음 여러 FeedRow 렌더링

@lprhodes 각 렌더링에 loadFeed에 대해 이야기 것과 매우 유사한, 나는 이해 Feed 이 올바른지, 한 번만 실행됩니다 렌더링?

initialScrollPosition 하면 initialScrollIndex 이겠죠? scrollToOffset 처럼 작동하지 않습니다. Feed 마운트될 때 ListHeaderComponent (높이 48픽셀)을 숨겨야 합니다.

이 콘솔 경고는 어떻습니까? 나는 renderItem에 PureComponent를 사용하고 있습니까?

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":85588,"prevDt":1497296394821,"contentLength":10023}

감사 해요 !!

그 경고는 마스터에서 수정된 일종의 버그이지만 초기 마운트의 경우 85초는 엄청나게 느립니다. 코드를 더 깊이 파고들어 무엇이 그렇게 오래 걸리는지 알아내야 합니다. 구글에서 반응 성능에 대해 검색하거나 광범위한 React 커뮤니티에서 도움을 요청하면 많은 리소스가 있습니다.

그리고 예, initialScrollIndex . 작동하려면 getItemLayout 를 구현해야 합니다. ListHeaderComponent 를 설명해야 합니다.

좋은 @sahrens , 나는 iPad 3 또는 OS 버전 iOS 9와 같은 오래된 하드웨어에 대해 두려워합니다 ... 최신 장치에서 테스트하는 것은 성능 문제가 없습니다. 다른 사람이 동일한 하드웨어 문제를 겪고 있는지 알고 싶었습니다 ... 잠시 후 커뮤니티에 더 깊은 내용이 있는지 확인하도록 요청하겠습니다. 감사합니다!!!

안녕 광산은 플랫 목록에 style={{ backgroundColor: 'white' }} 를 제공하여 수정되었습니다.

@hramos & @sahrens , 0.44.0 사용 react-native-tab-vew , 그리고 정말 핵심 팀은이 시간에 추천 무엇 분명하지 않다.

@sjmueller 는 @sahrens 가 이것이 이미 마스터에서 수정

@hramos 방금 이 전체 스레드를 다시 검토했습니다. 놓쳤을 수도 있지만 @sahrens 에서 FlatList가 보이지 않게 되는 것이 마스터에 고정되어 있다는 언급을 본 적이 없습니다. 또한 이 문제를 참조하는 커밋/PR도 보지 못했고 마지막으로 문제를 해결하기 위한 권장 해결 방법도 없었습니다.

@yaronlevi 는 react-native-tab-view 또는 TabNavigator lazy={true} 설정을 권장하지만 이는 iPhone 7 플러스에서도 급격한 지연을 유발합니다.

@knappdev에 따르면 lazy 없이 작동하므로 0.44.0에서 업그레이드하여 성공 여부를 확인하겠습니다.

내 해결 방법은 플랫리스트가 사용 중인지 여부에 따라 removeClippedSubviews를 켜고 끄는 것입니다.

  constructor (props) {
    super(props)

    this.state = { removeClippedSubviews: false }

    this._disableRemoveClippedSubviews = this._disableRemoveClippedSubviews.bind(this)
    this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this)
    this._renderItem = this._renderItem.bind(this)
  }

  _disableRemoveClippedSubviews () {
    this.setState({ removeClippedSubviews: false })
  }

  _onViewableItemsChanged({ viewableItems, changed }) {
    if (!this.state.removeClippedSubviews) this.setState({ removeClippedSubviews: true })
    if (this._disableRemoveClippedSubviewsTimeout) clearTimeout(this._disableRemoveClippedSubviewsTimeout)
    this._disableRemoveClippedSubviewsTimeout = setTimeout(this._disableRemoveClippedSubviews, 3000)
  }

  render () {    
    const { removeClippedSubviews } = this.state

    return (
      <FlatList
        renderItem={this._renderItem}
        removeClippedSubviews={removeClippedSubviews}
        onViewableItemsChanged={this. _onViewableItemsChanged}
      />
    )
  }

removeClippedSubviews는 이제 FlatList에 대해 기본적으로 꺼져 있습니다.

느린 장치의 문제에 대해 RNTester 앱 FlatListExample을 사용해 보셨습니까?

FlatListExample의 성능은 어떻습니까?

removeClippedSubviews는 이제 FlatList에 대해 기본적으로 꺼져 있습니다.

예 - 그래서 실제로 스크롤할 때 켜는 것입니다. 그런 식으로 무작위 지터를 덜 얻습니다.

그런 다음 FlatList가 자체적으로 수행하는 것보다 더 많이 엿듣는 메모리를 줄이기 위해 뷰 셀에서 멀리 떨어진 셀을 빈 셀로 바꿉니다.

그래서 결국 removeClippedSubviews={false} 를 사용하는 대신에 고칠 방법이 없습니까? 성능이 너무 비싸더라도?

나를위한 수정은 ios 시뮬레이터에 대해 원격으로 js 디버깅을 비활성화하는 것이 었습니다.

lazy: true 설정이 효과가 있었던 것 같습니다. 아직 성능을 테스트하지 않았습니다.

이 문제를 removeClippedSubViews={false}

최고의 해결 방법
모든 하드웨어/시뮬레이터에서 작동합니다. removeClippedSubViews={false} 가 iPhone 7에서 항상 작동하는 것은 아닙니다.

목록 보기에서 강제로 이동해야 합니다.

componentDidMount() {
   requestAnimationFrame(() => {
      // HACK TO RELOAD DATA
      this.refs._list.scrollTo({x: 1, y: 0, animated: false})
    });
}

참조의 예.

 <ListView
     ref="_list"
     dataSource={this.state.dataSource}
     renderRow={(data, sectionId, rowId) => <Row
        rowId={rowId}
        selectedRow={this.state.selectedRow}
        onPressRow={this._pressRow.bind(this)}
        {...data}/>}
     renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
     removeClippedSubViews={false}
     initialListSize={SortedBrandList.count}/>

문제는 이미 마운트되었을 수 있다는 것입니다.

2017년 8월 24일 오후 3시 44분에 Peter Suwara [email protected] 은 다음과 같이 썼습니다.

해결 방법
모든 하드웨어/시뮬레이터에서 작동합니다.

'''componentDidMount() {
요청 애니메이션 프레임(() => {
// 데이터를 다시 로드하는 해킹
this.refs._list.scrollTo({x: 1, y: 0, 애니메이션: false})
});
}'''

'''
참조="_list"
dataSource={this.state.dataSource}
renderRow={(데이터, 섹션 ID, 행 ID) => }
renderSeparator={(sectionId, rowId) => }
removeClippedSubViews={거짓}
initialListSize={SortedBrandList.count}
/>'''

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하세요.

나는 적어도 시뮬레이터에서 다음을 사용하여 이 문제를 해결했습니다.

<ListView removeClippedSubViews={false} .... />

내 생각에는 ClippedSubviews를 관리하는 루틴이 ListView가 현재 화면에 없을 때 경계를 제대로 확인하지 않는다는 것입니다. 이것은 화면 밖에서 렌더링한 다음 화면에서 움직이는 모든 ListView 구성 요소에서 매우 자주 발생합니다. 이것은 수정하기에 너무 어려운 버그가 아닙니다.

이 기능이 문제라고 확신합니다: https://github.com/facebook/react-native/blob/master/React/Views/RCTView.m#L321 -L369

내 생각에 측정하는 좌표 공간이 잘못된 곳이 있습니다. 지금 그것을보고 있습니다.

이것이 수정이 될 수 있습니까? https://github.com/facebook/react-native/pull/15669/files

아직 해결 방법이 없나요?

@petersuwara : 당신이 제안한 작업. 감사합니다. @MattFoley : 수정 사항을 언제 다운로드할 수 있습니까?

To FlatList에만 국한되지 않고 ListView에서도 로드하는 데 문제가 있는 것 같습니다.
데이터 소스를 설정할 때 약간의 지연을 사용하여 해결 방법을 찾았습니다.

componentWillMount 메서드에서 원격 소스에서 데이터를 로드하면 다음 코드가 실행됩니다.
작동하는 것 같습니다 :

setTimeout(function(){
       this.updateDataSource(array,newArray)
},30)

updateDataSource = (comments,dataSource) =>{
        this.setState({
            allComments:comments,
            dataSource: this.state.dataSource.cloneWithRows(dataSource),
            isLoading:false

        })
}

그리고 약간의 지연 시간 동안 항상 로딩 화면을 표시할 수 있습니다. 너무 짧아서 보이지도 않습니다.

@nathvarun 의 방법이 작동하는 것을 찾았

이것은 react-navigation의 탭에 할당된 화면과 같이 이미 마운트된 구성 요소에서 발생하지만 더 현재 선택되어 있습니다.

위의 내 PR이 문제를 해결한 것 같지만 병합하는 데 운이 없었습니다. 다른 사람이 그 PR에 대해 차임하고 싶습니까?

@MattFoley 병합 여부. 나는 지금 당신의 코드를 사용하고 있습니다. 그리고 그것은 정말로 내 문제를 해결합니다.

react-navigation 의 TabNavigator 를 react-navigation lazy: true 것도 작동합니다... 하지만 react-native 수정되는 것을 보는 것이 좋습니다.

SectionList 또는 Flatlist를 사용하는 경우 ref = {(ref)=> this.sectionList = ref }
코드에서 this.sectionList.recordInteraction() - 뷰를 렌더링해야 합니다.

@MattFoley 의 제안된 수정 사항이 병합되었으며 이제 0.50 릴리스의 일부입니다. https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

방금 업데이트했는데 <ListView /> 에서 이 문제가 계속 표시됩니다. 내가 뭔가 잘못하고 있습니까? 내 package.json은 다음과 같습니다.

  "dependencies": {
    "native-base": "^2.3.1",
    "react": "^16.0.0",
    "react-native": "^0.50.0-rc.1",
    "react-native-linear-gradient": "^2.3.0",
    "react-native-modal": "^4.1.0",
    "react-native-simple-store": "^1.3.0",
    "react-navigation": "^1.0.0-beta.11"
  },

ListView 는 지금쯤 더 이상 사용되지 않는다고 생각합니다. FlatList 시도하고 어떻게 되는지 확인하는 것이 좋습니다.

나는 우리가 0.50.3에서 이것을 계속 보고 있다고 믿는다. 다른 사람이 확인할 수 있습니까?

FlatList로 전환하여 이 문제를 해결했습니다.
2017년 11월 17일 금요일 오전 8:39 Colin Ramsay [email protected]
썼다:

나는 우리가 0.50.3에서 이것을 계속 보고 있다고 믿는다. 다른 사람이 확인할 수 있습니까?

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

아, 우리는 이미 FlatList를 _사용_하고 있습니다.

이것은 여전히 ​​0.50.3의 문제입니다. removeClippedSubviews는 효과가 없는 것 같습니다. 다시 열 수 있습니까?

0.50.3에서 여전히 문제가 있습니다. 이거 다시 열어주세요.

번거롭게 해서 죄송합니다만 다시 열 수 있을까요? 이것은 시급한 문제입니다.

최신 Expo React Native SDK를 사용하여 이 문제에 부딪쳤습니다. TabNavigator의 세 번째 ListView에만 발생합니다. 두 번째와 세 번째 페이지를 바꾸면 새 세 번째 페이지가 영향을 받습니다. removeClippedSubviews는 제 경우에는 그것을 고쳤습니다.

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); }); 나를 위해 일했습니다.

this.listView.scrollToEnd() 사용하면 작동하지 않으므로 목록 끝의 좌표를 수동으로 계산하여 scrollTo() 전달해야 했습니다.

flatlist의 경우 동일한 배열을 업데이트하여 발생할 수 있습니다. FlatList는 데이터가 다른지 확인합니다. 따라서 불변 배열을 사용하십시오.

removeClippedSubviews={false}는 제 경우에 대한 버그를 수정합니다.

<ListView
            data={this.state.mockData}
            renderRow={(rowData) => this.renderRow(rowData)}
            removeClippedSubviews={false}
 />

@edmengel 맞습니다. 나는 프로젝트에서 일하고 있었고 정확히 같은 버그가있었습니다.

스크롤하기 전에:

스크롤 후:

React-native-router-flux@^4.0.0-beta.27 는 탐색에 사용되며 App.js는 이를 반환합니다. 내 검색 페이지에 목록 보기가 포함되어 있으며 이 버그가 있습니다. 세 번째 탭에 있습니다.

<Provider store={store}>
        <View style={{flex: 1}}>
            <Router hideNavBar={true}>
                <Scene key="modal" modal>
                    {/* Tab Container */}
                    <Scene key="tabbar" tabs={true} tabBarPosition="bottom" tabBarStyle={{borderTopColor:'black', borderTopWidth:1,backgroundColor:'white'}}>
                      {/*Tabs */}
                        <Scene key="NewPage" component={NewPage} title="NewPage" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="NewPage2" component={NewPage2} title="Newpage2" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="SearchPage" component={SearchPage} title="Search"  hideNavBar={true} />
                    </Scene>
                </Scene>
            </Router>
        </View>
</Provider>

목록 보기가 포함된 검색 페이지를 세 번째 탭에서 두 번째 탭으로 변경했을 때 목록 보기가 제대로 작동했습니다.

이를 위해 작동하는 Hack을 찾았습니다.

render() {
       setTimeout(() => {
            this.sectionList && this.sectionList.recordInteraction(); 
        }, 50);
        return (
            <SectionList ref={(view) => { this.sectionList = view }} />
        )
}

<Flatlist style={{ flex: 1 }}/>
이 트릭은 저에게 효과적입니다.

ScrollView 및 ListView 모두 0.55.4 에 대한 동일한 문제입니다. removeClippedSubviews={false} 추가하면 작동합니다.

불행히도 우리의 경우 Android https://github.com/facebook/react-native/issues/13600#issuecomment -315629140에서 누락된 이미지를 피하기 위해 필요하기 때문에 옵션이 아닙니다.

렌더링 시 앞뒤로 스크롤하는 것은 탐색 후에만 발생하므로 처음에는 빈 화면으로 전환되는 것처럼 보입니다.

보기를 조정하는 것도 도움이 되지 않았습니다.

다른 제안 사항이 있습니까?

특정 스크롤 위치 이후에만 발생하는 것으로 나타났습니다...
https://streamable.com/l5arv

chrome-devtools를 사용하여 보기를 검사하면 모든 하위 보기가 잘린 것을 볼 수 있습니다.

여전히 멈췄습니다. @hramos 를 다시 여십시오.

그런 간단한 기능에 여전히 문제가 있습니까? 이것이 우리가 React Native에서 곧장 Native 코드로 다시 이동한 이유입니다.

그렇게 간단하다면 손을 내밀어 고쳐주세요 @petersuwara

이 문제는 잠시 닫혀 있습니다. 이것이 귀하에게 영향을 미치는 경우 _새 호를 열고 가능한 한 자세한 정보를 제공하십시오. 여기에 보고된 원래 문제가 수정되었기 때문에 이 문제를 잠그고 있으며, 이후에 댓글을 남긴 각 사람이 똑같은 문제에 직면하고 있는지 확실하지 않습니다.

우리는 Facebook에서 FlatList _광범위하게_ 사용하고 있으며 내부적으로 이러한 종류의 불만이 제기된 적은 없습니다. 예를 들어 특정 탐색 라이브러리에서 이러한 유형의 문제가 발생할 수 있습니다. 문제에 대한 자세한 정보와 함께 새 문제를 여는 것은 재현 단계의 명확한 목록이나 이상적으로는 소규모 프로젝트가 큰 도움이 될 것입니다.