react-native - ScrollView 内的粘性组件

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