react native FlatList 自定义头部吸顶

效果如图 Mar-18-2020 16-54-19.gif

思路：通过监听flatlist的onScroll，让顶部跟随flatlist一起滚动
核心代码如下:

const COIN_VIEW_HEIGHT = screen.PIXEL_90

class PointShop extends React.Component {
    constructor(props) {
        super(props);
        this.renderItem = this.renderItem.bind(this)
    }

    state={
         list:[],
        scrollY:new Animated.Value(0),
    }

    renderHeader(){
        const {data} = this.state
        return (
            <BackHeader
                {...this.props}
                title={"积分商城"}
            />
        )
    }


    renderItem({item,index}){
        .....
    }


    renderTabBarItem(item,index){
        const isSelect = this.state.showType === index
        return (
            <TouchableOpacity
                key={index.toString()}
                style={{flex:1,justifyContent: 'center',alignItems:'center'}}
                onPress={()=>{
                    this.setState({
                        showType:index
                    })
                }}
            >
                <Text style={{color: isSelect ? colors.themeColor : '#999',fontSize: 14,
                    fontWeight: isSelect ? 'bold' : 'normal'
                }}>{item}</Text>

            </TouchableOpacity>
        )
    }
   //这里是要吸顶的部分
    renderTabBar(){
        return .....
    }

  //自定义头部
    renderMyCoinView(){
        const {isLoggedIn, user} = this.props.user;
        return (
            <View style={{backgroundColor:colors.themeColor,height: COIN_VIEW_HEIGHT,
                flexDirection:'row'
            }}>
          
            </View>
        )
    }

    render() {
      //通过动画差值控制头部偏移
        const translateY = this.state.scrollY.interpolate({
            inputRange: [-1, 0, COIN_VIEW_HEIGHT, COIN_VIEW_HEIGHT + 1],
            outputRange: [0, 0, -COIN_VIEW_HEIGHT, -COIN_VIEW_HEIGHT],
        });


        return (
            <Provider>
                <View style={styles.container}>
                    {this.renderHeader()}
                    {/*头部要滚动的部分，设置zIndex=-10防止被导航头部遮挡*/}
                    <Animated.View
                        style={{
                            transform:[{
                                translateY:translateY
                            }],
                            zIndex:-10
                        }}
                    >
                        {this.renderMyCoinView()}
                        {this.renderTabBar()}

                    </Animated.View>

                    <Animated.View
                        style={{flex:1,
                            transform:[{
                                translateY:translateY
                            }],
                        }}
                    >
                        <FlatList
                            onScroll={(event)=>{
                                let offsetY = event.nativeEvent.contentOffset.y;
                                console.log(offsetY)
                                this.state.scrollY.setValue(offsetY)
                            }}
                             
    
                            style={{backgroundColor:'#F7F7F7'}}
                            refreshing={this.state.refreshState}
                            onEndReached={()=>{

                            }}

                            numColumns={2}
                            renderItem={this.renderItem}
                            data={this.state.list}
                            ItemSeparatorComponent={()=>{
                                return(
                                    <View style={{height:1,backgroundColor: '#F7F7F7'}}/>
                                )
                            }}

                        />
                    </Animated.View>


                </View>
            </Provider>
        );
    }


}

此外还可以通过下面这个属性进行吸顶 这个是ScrollView自带的吸顶属性
//stickyHeaderIndices={[0]}