如何在ListView或FlatList中呈現absoulute元素？

這是一個有趣的一個我一直在戳的同時：如何在ListView或FlatList中呈現absoulute元素？

我有一個FlatList（與ListView的同樣的問題），我想呈現具有以下特徵內部的內滾動容器的元素：

絕對定位（從而對列表中的元素的位置沒有影響）
zIndex的（上面列表中的元素）從頂部
位置XX距離（translateY或top）

的使用情況是即時呈現日視圖日曆網格與從內部滾動視圖的開始固定在X距離當前時間位置上的水平條，使其顯示當用戶滾動通過該位置。

到目前爲止，我已經嘗試用另一個ScrollView包裝FlatList/ListView ...還嘗試將此元素作爲只在頁眉/頁腳可見時纔會起作用的頁眉元素（在視圖外面時被刪除）。

所有，並歡迎所有的想法。 :)

感謝

下面的截圖（紅色條是什麼，我試圖渲染）：

來源

2017-03-28 Jose Browne

什麼特別的理由，你不只是讓一個兄弟着眼於'ListView'具有較高'zIndex'？ –

嗯..你的意思是一個ListView只是爲了酒吧？我已經嘗試了兄弟滾動型（因爲它只是一個元素），但我們怎麼會同步他們的滾動位置爲用戶向上和向下滾動FlatList？ –

哦，我剛剛明白你想要達到的目標，所以這條線隨着滾動而移動。最簡單的方法是將其呈現在項目中，這是您的用戶界面的可行選擇嗎？ –

下面是這聽起來像你想實現一個工作演示：https://sketch.expo.io/BkreW1che。您可以點擊「預覽」在瀏覽器中查看它。

這裏就是你需要測量的ListView的高度，放在它上面的指示燈（查看上面的鏈接查看完整的源代碼）的主要代碼：

handleLayout(event) { 
    const { y, height } = event.nativeEvent.layout; 

    // Now we know how tall the ListView is; let's put the indicator in the middle. 
    this.setState({ indicatorOffset: y + (height/2) }); 
    } 

    renderIndicator() { 
    const { indicatorOffset } = this.state; 

    // Once we know how tall the ListView is, put the indicator on top. 
    return indicatorOffset ? (
     <View style={[{ position: 'absolute', left: 0, right: 0, top: indicatorOffset }]} /> 
    ) : null; 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      onLayout={(event) => this.handleLayout(event)} 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
     /> 
     {this.renderIndicator()} 
     </View> 
    ); 
    }

編輯：我現在明白了您希望指標隨列表一起滾動。這是從上面的簡單變化，只是增加一個onScroll監聽到ListView：https://sketch.expo.io/HkEjDy92e

handleScroll(event) { 
    const { y } = event.nativeEvent.contentOffset; 

    // Keep the indicator at the same position in the list using this offset. 
    this.setState({ scrollOffset: y }); 
    },

隨着這一變化，指示器實際上似乎有點落後於因爲onScroll回調的延遲。

如果你想更好的性能，可以考慮渲染指標作爲renderRow方法而不是一部分。例如，如果您知道指標應該在上午10點30分出現，那麼您將在10點行的中間呈現該指標。

來源

2017-03-30 01:35:52

這真棒!! ...感謝這個演示...我會在renderRow裏面渲染一個鏡頭，因爲在這一點上表現真的是一切。 –

如果您爲每個渲染渲染，滾動性能應該很差。可能會更好地使用Animated.event與本機動畫驅動程序，然後插入它的紅色元素的'translateY' –

如何在ListView或FlatList中呈現absoulute元素？

回答

相關問題