React NativeでCoordinatorLayoutのようなものを実現する方法は？

Question

アンドロイドのCoordinatorLayoutのような動作をしたいツールバーのために常に入力してください私はあまりにも多くのソリューションを試してみましたが、実際には涼しいですがリストビューではうまくいきませんでしたhttps://github.com/maolion/mao-rn-android-kitアンドロイドのスクロールイベントスロットルは、それがうまくいかない時代のほとんどの時に働いていません。

MAO-RN-アンドロイド・キットに

<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.value

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

私ができるを更新するonScrollと一緒にAnimated.eventを使用していますinterpolateをthis.state.scrollYと呼び出し、この値をとして更新したい別のコンポーネントのtransformスタイルに入力しますがスクロールします。