getItemLayoutProp로 평면 목록 스크롤 참조

Question

평면 목록 및 스크롤 방법에 약간의 문제가 있습니다. 나는 주석이있는 평면 목록이 있으며, 새로운 평면 목록이 추가되면 추가 된 주석을보기 위해 목록을 아래쪽으로 스크롤하려고합니다.

scrollToIndex을 사용하면 getItemLayout 부족으로 인해 네이티브가 계속 오류를 표시하며이 기능을 설정하는 데있어 다른 문제가 있습니다. 모든 항목의 크기가 다를 수 있습니다.

scrollToEnd에는 몇 가지 문제가 있으며 때로는 페이지의 맨 아래로, 때로는 flatlist props에 설정된 headerComponent 요소까지 스크롤됩니다. 맨 아래로 스크롤하는 방법에 대한 아이디어가 있습니까?

Answer 1

scrollToIndex를 사용하려면 getItemLayout을 사용해야합니다. getItemLayout을 사용할 의사가 없으면 사용하는 것이 중요하지 않습니다.

class ScrollToExample extends Component { 

    getItemLayout = (data, index) => (
    { length: 50, offset: 50 * index, index } 
) 


    scrollToIndex =() => { 
    let randomIndex = Math.floor(Math.random(Date.now()) * 
    this.props.data.length); 
    this.flatListRef.scrollToIndex({animated: true, index: 
    randomIndex}); 
    } 

    scrollToItem =() => { 
    let randomIndex = Math.floor(Math.random(Date.now()) * 
    this.props.data.length); 
    this.flatListRef.scrollToIndex({animated: true, index: "" + 
    randomIndex}); 
    } 

    render() { 
    return (
    <FlatList 
     style={{ flex: 1 }} 
     ref={(ref) => { this.flatListRef = ref; }} 
     keyExtractor={item => item} 
     getItemLayout={this.getItemLayout} 
     initialScrollIndex={50} 
     initialNumToRender={2} 
     renderItem={({ item, index}) => (
      <View style={{...style, backgroundColor: this.getColor(index)}}> 
      <Text>{item}</Text> 
      </View> 
     )} 
     {...this.props} 
    /> 
); 

} }

이 도움이

https://gist.github.com/joshyhargreaves/b8eb67d24ce58a6d8bffb469f7eeaf39

희망 : 여기에 반응-기본 문서에서 가져온 예입니다!