React native sticky tab吸頂功能

rn的吸頂實現思路和h5不同，且安卓可能有相容性問題

思路一

使用ScrollView的stickyHeaderIndices屬性

• IOS支援，Android不支援
• 吸頂目標需要是Scrollview的第n+1個子節點

<ScrollView
    style={ s.container }
    onScroll = { this.onScroll }
    scrollEventThrottle = {1}
    showsVerticalScrollIndicator = { false }
    stickyHeaderIndices={[n]} // IOS標題吸頂
>
    { content }
</ScrllView>

思路二

使用Animated+插值運算

• iOS使用原生動畫，效能較好
• 安卓部分app不支援原生動畫，需設定useNativeDriver=false，此時會有相容問題

import { View, Animated, FlatList } from 'react-native'
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) //使用flatlist需要用Animated包裹一下

state = {
    scrollY: new Animated.Value(0)
}

render(){
    const HEIGHT = 200
    const translateY = this.state.scrollY.interpolate({ //插值運算
            inputRange: [-1, 0, HEIGHT, HEIGHT+1],
            outputRange: [0, 0, -HEIGHT, -HEIGHT],
    })
    return (
        <Animated.View
           style={[{ transform: [{ translateY: translateY }]}]}
        >
            { headerContent }
            { stickyContent }
            <Animated.ScrollView // 或<AnimatedFlatList />
                scrollEventThrottle = {16}
                showsVerticalScrollIndicator = {false}
                onScroll={ Animated.event([{
                     nativeEvent: { contentOffset: { y: this.state.scrollY } }
               }], {
                     useNativeDriver: isIOS, // 是否觸發原生動畫
                     /// listener: (e) => this._onScroll(e),
                   })
                }
            >
                { scrollContent }
            </Animated.ScrollView>      
        </Animated.View>
    )
}

• 官網介紹：https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated
• 使用該屬性後，觸發的原生動畫驅動，不會觸發render，達到優化效能的目的
•  官網介紹是支援android的，但是實際我在用的時候設useNativeDriver=true時安卓上沒有transform效果，設為false才有

待解決問題

由於安卓使用的useNativeDriver=false，使得在小米手機上表現不太好，滾動時stickytab會明顯抖動

可優化點：調整flatlist設定、固定上劃高度、改監聽頻率、調整插值運算、發包對比本地執行效果等等