陣營本地SectionList scrollToLocation不是一個函數

我已經試過（跳過，如果你不關心或需要的信息）陣營本地SectionList scrollToLocation不是一個函數

我使用RN SectionList和我運行RN V-0.44 0.0。我正在嘗試使用此部分列表在我的應用中創建一個簡單的聊天窗口，並且我需要能夠在任何新事物進入時滾動到底部。最近，我使用了react-native-reversed-flat-list組件found here，它工作得很好，但後來我決定我需要顯示日期部分標題，而不是僅僅顯示所有消息。我嘗試使用「翻轉」transformscaleY實現（found here），這會導致列表從下向上渲染（本來會很甜）。但是，如果將摺疊樣式添加到節列表中，節標題和對話行像您應該這樣做，則會導致所有標題都呈現在節的底部而不是頂部。就UI/UX而言，這顯然是不可取的。

例如：如果「應該」像這樣呈現... [section-title |消息|消息|消息]，它會最終在屏幕上渲染，而不是像這樣... [message |消息|消息|部分標題]

問題

因爲我已經決定做腿部的工作，只是控制滾動到下自己，這就是事情變得奇怪。無論什麼原因，功能scrollToLocation不起作用，並給我死亡紅色屏幕說，「scrollToLocation是不是一個功能」。我在過去使用過這個功能，並且它的工作很好。它實際上應該是this component上的一種可接受的方法。

此外，由於這兩個擴展VirtualizedList組件，我應該能夠使用scrollToEnd函數，但我得到同樣的東西。

我真的不想要保存外部容器和內部容器的高度onLayout，然後使用差異滾動到ScrollView的底部......這種方式更優雅。

繼承人我的代碼...

renderConversation() { 
    if(this.state.dataSource.length > 0) { 
     return (
      <View style={{ height: (this.props.display.height - headerBarHeight - 35) }}> 
       <SectionList 
        ref={ref => { this.messagesSectionListRef = ref; }} 
        sections={this.state.dataSource} 
        stickySectionHeadersEnabled={false} 
        showsVerticalScrollIndicator={false} 
        showsHorizontalScrollIndicator={false} 
        renderItem={this.renderMessageRow.bind(this)} 
        keyExtractor={(item, index) => `message_${index}`} 
        renderScrollComponent={this.renderScrollComponent.bind(this)} 
        renderSectionHeader={this.renderMessageSectionHeader.bind(this)} 
        onContentSizeChange={(newWidth, newHeight) => { 
         let sectionIndex = (this.state.dataSource.length - 1); 
         let itemIndex = this.state.dataSource[sectionIndex].data.length - 1; 

         this.messagesSectionListRef.scrollToLocation({ 
          itemIndex, 
          sectionIndex, 
          animated: false, 
         }); 
        }} 
        style={[ 
         styles.conversationBox, 
         { width: this.props.display.width - mainContainerSideMargins } 
        ]} /> 
      </View> 
     ); 

    } else { 
     return null; 
    } 
} 


//Flip style implementation 
flip: { 
    transform: [{ scaleY: -1 }] 
}

來源

2017-07-20 GoreDefex

** GoreDefex **，你是否樂於解決這個問題？你能分享你的代碼示例嗎？什麼是正確的方式來使用scrollToLocation，scrollToEnd方法？我試圖做同樣的聊天頁面，我也有這個問題。我使用react-native 0.46.4 – Kholiavko

scrollToLocation是不適用於SectionList在您正在使用的RN的版本。檢查0.44 docs

我建議你運行RN更新，功能是在0.45有。如果由於任何原因您的情況不適用，您可以使用the changes required to make scrollToLocation work創建一個自定義的RN版本。不過，我不會推薦這種方法。

來源

2017-07-20 10:33:56 dhorelik

謝謝。由於某些原因，當我昨晚檢查時，我認爲我在0.44文檔中看到了該函數。我的錯。 0。45打破了我的整個應用程序，我花了一個晚上，現在追查爲什麼錯誤發生。 – GoreDefex

工作但我也不能從它的包裝組件'VirtualizedList'使用scrollToEnd函數。任何想法爲什麼？ – GoreDefex

陣營本地SectionList scrollToLocation不是一個函數

回答

相關問題