React Native：如何翻譯WhatsApp for Android中的粘貼標題？

我想創建一個像WhatsApp for Android的粘貼標題。我的方法是，聽取滾動事件並馬上移動標題，口吃不暢，Whatsapp中的那個非常流暢。所有ScrollView的反彈都轉移到了頭部，看起來很醜。理想的解決方案是先移動標題並在移動時終止平移響應者，以便底層ScrollView成爲觸摸事件的響應者 - 但這不是可能的。React Native：如何翻譯WhatsApp for Android中的粘貼標題？

你有任何建議使這個完美嗎？

這是我到目前爲止所嘗試的。使用Animated.views與Animated.values沒有任何作用。

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

來源

2016-08-20 Olli

React Native的ScrollView默認支持粘性標頭。如果您只想保留某些標題，可以使用stickyHeaderIndices來完成。

如果您打算複製滾動在Android中的WhatsApp聊天時粘日期頭，這可以通過使用ListView和ListViewDataSource的cloneWithRowsAndSections來實現。

有關更多信息，請查看RN's docs on ScrollView或ListView。

來源

2016-10-28 13:42:54 NiFi

React Native：如何翻譯WhatsApp for Android中的粘貼標題？

回答

相關問題