滚动视图内的粘性组件

Question

我试图建立像这个应用程序的粘性组件

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>

Answer 1

使用ScrollView组件非常简单.已经存在一些名为"stickyHeaderIndices"的东西,它使得child的索引变得粘滞.在下面的代码中,renderComponent2中的内容在滚动时保持粘滞状态.

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

参考:https://facebook.github.io/react-native/docs/scrollview.html#stickyheaderindices

Answer 2

嘿,伙计们感谢你回答我的第一个问题(Yeay!),我发现它是如何做到这一点现在...所以基本上我做的是我的,他们从F8Scrolling本机模块后备F8App代码欺骗,如果它是不可用此

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>
    ....
   );

所以基本上我所做的是动画{position:'absolute'}视图的顶部位置,而输出范围的值在底部位置和我的标题高度之间(所以它会停在我的下方标题)并且输入范围介于0和顶部位置与标题高度之间的差异...最后,当您滚动滚动视图时,动画会感觉自然...

你去一个粘性标题自定义视图...这是结果

如果你觉得我的答案令人困惑,你最好去janic duplessis中文帖子:
React Native ScrollView动画标题

Answer 3

这非常简单，您只需要知道在滚动视图组件内滚动期间希望其粘住的索引组件即可。这是一个例子：

 <ScrollView
      style={styles.screen}
      stickyHeaderIndices={[0]}
 >
     <View><Text>Hello1</Text></View>
     <View><Text>Hello2</Text></View>
     <View><Text>Hello3</Text></View>
 </ScrollView>

因此，当滚动 Hello1 时，文本将粘在 ScrollView 的顶部

祝你好运