如何在React Native中實現類似CoordinatorLayout的功能？

Question

我想實現像android的CoordinatorLayout一樣的行爲總是爲我的工具欄輸入我嘗試了太多的解決方案有些工作，但不完全喜歡https://github.com/maolion/mao-rn-android-kit這真的很酷，但有一個挫折，因爲它不適用於ListView我也試過動畫但Android上的滾動事件節流閥大多數情況下都不工作。

使用茂-RN-機器人-KIT

<CoordinatorLayoutAndroid ref={(component) => this.coordinatorLayout = component} fitsSystemWindows={false}> 
    <AppBarLayoutAndroid 
     layoutParams={{ 
          width: 'match_parent', 
          height: 112 
         }} 
     style={{ backgroundColor:"#528eff" }}> 
     <View layoutParams={{height: 56, width: this.windowWidth, scrollFlags: (
            AppBarLayoutAndroid.SCROLL_FLAG_SCROLL | 
            AppBarLayoutAndroid.SCROLL_FLAG_ENTRY_ALWAYS)}} style={{height: 56}}> 
      <ToolbarAndroid 
       titleColor={'#FFF'} 
       title={this.props.title} 
       navIcon={images.arrowBack} 
       onIconClicked={() => this._goBack()} 
       onActionSelected={() => {}} 
       actions={[{title: 'Search', icon: images.search, show: 'always'}]} 
       style={[{backgroundColor: '#528eff', width: this.windowWidth, height: 56}]}/> 
     </View> 
     <View layoutParams={{height: 56, width: this.windowWidth}} 
       style={{flex: 0, flexDirection: 'row', justifyContent: 'center', width: this.windowWidth, backgroundColor: '#528eff'}}> 
      <TouchableOpacity onPress={() => this.getDocuments('high')} 
           style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}> 
       <Text 
        style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => this.getDocuments('normal')} 
           style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}> 
       <Text 
        style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => this.getDocuments('low')} 
           style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}> 
       <Text 
        style={[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text> 
      </TouchableOpacity> 
     </View> 
    </AppBarLayoutAndroid> 
    <View 
     ref={(component) => this.contentLayout = component} 
     style={{flex: 1, backgroundColor: 'transparent', height: this.windowHeight - 150}}> 
     <ListView 
      style={{height: this.windowHeight - 150, overflow: 'hidden'}} 
      dataSource={this.state.documents} 
      enableEmptySections={true} 
      renderRow={(rowData) => this._renderRow(rowData)} 
     /> 
    </View> 
</CoordinatorLayoutAndroid> 

Answer 1

的關鍵流體反應以滾動位置使用Animated.event與onScroll沿來更新Animated.value

getInitialState: function() { 
    return { 
     scrollY: new Animated.Value(0) 
    } 
}, 
render() { 
    return (
     <ScrollView 
      scrollEventThrottle={16} 
      onScroll={Animated.event(
          [{nativeEvent: 
           {contentOffset: 
           {y: this.state.scrollY} 
           } 
          }] 
      )}> 
    // etc ... 
} 

我所能然後在this.state.scrollY上調用interpolate，並將此值作爲我想更新爲的另一個組件上的transform樣式滾動。