粘性組分內滾動型

我嘗試建立AA粘性組分喜歡這個程序粘性組分內滾動型

http://www.screencapture.ru/file/E88F08Fc

交易，產品展示，活動標籤頁/ segmentControl實際上是從底部開始，當你滾動，當你打的頭的底部停止和啓動棒，而內容保持滾動

這是我的代碼

 <View style={styles.container}> 
      <ScrollView 
       style={styles.container} 
       scrollEventThrottle={16} 
       onScroll={ 
        Animated.event(
         [{nativeEvent:{contentOffset: {y: this.state.scrollY}}}] 
        ) 
       } 
      > 
       {this._renderScrollViewContent()} 
      </ScrollView> 
      <View style={styles.stickyStuff}></View> 
      <Animated.View 
       style={[styles.header, {height: headerHeight}]} 
      > 
       <Animated.Image 
        source={require('../../assets/images/pvj.jpg')} 
        style={[styles.backgroundImage, {opacity: imageOpacity}]} 
       /> 
       <Animated.View style={[styles.bar, {transform: [{translateY: titleTranslateY}, {translateX: titleTranslateX}]}]}> 
        <Text style={styles.title}>PARIS VAN JAVA</Text> 
       </Animated.View> 

      </Animated.View> 
     </View>

來源

2016-07-26 Bondan Herumurti

我不明白你正在試圖做 –

@ChrisGeirman抱歉讓你分不清什麼，因爲我仍然還沒有得到任何的聲譽，所以我不能嵌入圖像需要屏幕截圖每一個動作來演示用戶體驗，所以在這裏一步一步地我需要預期1。http://www.screencapture.ru/file/1609269e 2. http://www.screencapture.ru/file/fEA8377B 3.http ：//www.screencapture.ru/file/651a7f98 4.http：//www.screencapture。ru/file/8871a435當你看到選項卡（Deals，Products，Events）從屏幕中間開始向上滾動時，它將開始粘貼在標題上 –

奇怪的是，SO會限制新用戶添加屏幕截圖。我不記得那個。我現在知道了。請考慮一下，但是你看過[LayoutAnimation]（https://facebook.github.io/react-native/docs/layoutanimation.html）嗎？ –

嗨感謝你回答我的第一個問題（Yeay！），我發現它是如何做到這一點現在...所以基本上我要做的就是我在F8App代碼騙他們來自哪裏F8Scrolling回退如果不使用這種

if (!NativeModules.F8Scrolling) { 
    var distance = EMPTY_CELL_HEIGHT - this.state.stickyHeaderHeight; 
    var translateY = 0; this.state.anim.interpolate({ 
    inputRange: [0, distance], 
    outputRange: [distance, 0], 
    extrapolateRight: 'clamp', 
    }); 
    transform = [{translateY}]; 
}

賦予所以在這裏我的動畫粘觀點的想法本機模塊是我結束了

const stickySegmentControlX = this.state.scrollY.interpolate({ 
    inputRange: [0, STICKY_SCROLL_DISTANCE], 
    outputRange: [INIT_STICKY_HEADER, HEADER_MIN_HEIGHT], 
    extrapolate: 'clamp' 
}) 

... 

    return(
    .... 
    <Animated.View ref="stickyHeader" style={[styles.stickyStuff, {top: stickySegmentControlX}]}> 
     <Text>Go Stick</Text> 
    </Animated.View> 
    .... 
    );

小號o基本上我所做的就是動畫{position：'absolute'}的視圖的頂部位置，而輸出範圍的值在底部位置和我的標題的高度之間（因此它會停在我的下方頭部），輸入範圍在0和頂部位置和標題高度的差值之間...最終，當您滾動滾動視圖時，動畫將會感覺自然......

您在那裏粘貼標題自定義視圖。 ..這裏的結果

如果你覺得我的回答是混亂的，它的更好您前往我的介質後：
React Native ScrollView animated header

來源

2016-07-27 12:30:11

你可以把人l內容爲ScrollView，將粘性標題放在那裏，然後在主視圖中使用第二個ScrollView作爲其餘內容。事情是這樣的：

<View style={styles.container}> 
    <ScrollView style={styles.mainScrollView}> 
     <View style={styles.header}> 
      // Header content here 
     </View> 

     <ScrollView style={styles.scrollableContent}> 
      // Scrollable content here 
     </ScrollView> 
    </ScrollView> 
</View>

設置height第二ScrollView，這樣只需要可用空間的一部分，這樣的標題會在頂部保持可見。

來源

2016-07-26 07:54:18

我發現這個視差滾動視圖模塊。它有這種行爲。

react-native-parallax-scroll-view

來源

2016-07-26 15:50:36

ScrollView組件非常簡單。已經有一些名爲「stickyHeaderIndices」的東西，它會讓孩子的索引變得粘稠。在下面的代碼中，renderComponent2中的內容在滾動時保持粘性。

<ScrollView 
     stickyHeaderIndices={[1]} 
     showsVerticalScrollIndicator={false} 
> 
    {this.renderComponent1()} 
    {this.renderComponent2()} 
    {this.renderComponent3()} 
</ScrollView>

參見：https://facebook.github.io/react-native/docs/scrollview.html#stickyheaderindices

來源

2017-12-29 13:19:15

粘性組分內滾動型

回答

相關問題