React Native：Whatsapp for Androidのようなスティッキーヘッダーを翻訳するには？

Question

AndroidのWhatsappのようなスティッキーヘッダーを作成したいと思います。私のアプローチは、スクロールイベントに耳を傾け、すぐにヘッダーを移動すると、吃音、Whatsappのものは非常に滑らかです。そして、ScrollViewのすべてのバウンスがヘッダーに転送されます。これは醜いものです。理想的な解決策は、ヘッダーを最初に移動して移動中にパンレスポンダーを終了させることです。その結果、基になるScrollViewはタッチイベントのレスポンダーになりますが、これは可能ではありません。

これを完璧にするための提案はありますか？

これまで私が試したことは次のとおりです。 Animated.valuesでAnimated.viewsを使用しても効果はありません。

class scrollHeader extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      scrollY: 0 
     }; 
     this.lastY = 0; 
    } 

    handleScroll(e) { 
     let dy = e.nativeEvent.contentOffset.y - this.lastY; 
     let scrollY = this.state.scrollY + dy; 

     scrollY = Math.min(scrollY, 80); 
     scrollY = Math.max(scrollY, 0); 

     this.setState({ 
      scrollY: scrollY 
     }); 
     this.lastY = e.nativeEvent.contentOffset.y; 
    } 

    render() { 
     const s = StyleSheet.create({ 
      container: { 
       flex: 1 
      }, 
      menu: { 
       position: 'absolute', 
       height: 160, 
       top: this.state.scrollY * -1, 
       left: 0, 
       right: 0, 
       backgroundColor: '#075e55', 
       zIndex: 1, 
       paddingTop: 40 
      }, 
      text: { 
       fontSize: 16, 
       padding: 20 
      }, 
      content: { 
       paddingTop: 160 
      } 
     }); 

    return (
      <View style={s.container}> 
       <StatusBar translucent backgroundColor={'#06544c'} /> 
       <View style={s.menu}><Text>{'Menu Header'}</Text></View> 
       <ScrollView style={s.content} onScroll={(e) => this.handleScroll(e)}> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
        <Text>{'Test'}</Text> 
       </ScrollView> 
      </View> 
    ); 
    } 
} 

Answer 1

リアクションネイティブのScrollViewはデフォルトでスティッキーヘッダーをサポートしています。特定のヘッダーのみを使用したい場合は、stickyHeaderIndicesを使用してこれを実行できます。

AndroidのWhatsAppでチャットをスクロールするときにスティッキー日付ヘッダーを複製する場合は、ListViewとListViewDataSourceのcloneWithRowsAndSectionsを使用してこれを達成できます。

詳細については、RN's docs on ScrollViewまたはListViewをご覧ください。