Android 如何在React Native中实现协调布局之类的功能？

我想实现一个像android的Coordinator Layout一样的行为我尝试了太多的解决方案有些确实有效，但不完全一样，这真的很酷，但有一个挫折，因为它不适用于ListView我也尝试了动画，但安卓上的滚动事件节流阀在大多数情况下都不起作用，甚至不起作用工作

使用android套件

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

this.coordinatorLayout=component}fitsSystemWindows={false}>
这个。_goBack（）}
onActionSelected={（）=>{}
actions={[{title:'Search'，icon:images.Search，show:'always'}]}
style={[{backgroundColor:'#528eff'，width:this.windowWidth，height:56}]}/>
this.getDocuments（'high'）}
style={[styles.highNormalLowDocListHeaderStateTextContainer，highSelected.borderStyle]}>
高
this.getDocuments（'normal'）}
style={[styles.highNormalLowDocListHeaderStateTextContainer，normalSelected.borderStyle]}>
正常的
this.getDocuments（'low'）}
style={[styles.highNormalLowDocListHeaderStateTextContainer，lowSelected.borderStyle]}>
低
this.contentLayout=component}
style={{flex:1，backgroundColor:'透明'，高度：this.windowHeight-150}>
这是.\u renderRow（rowData）}
/>

对滚动位置做出流畅反应的键是使用

动画.event

和

onScroll

来更新

动画.value

getInitialState:function（）{
返回{
滚动：新的动画。值（0）
}
},
render（）{
返回(
//等等。。。
}

---

然后，我可以调用

this.state.scrollY上的
interpolate
，并将该值输入另一个组件上的
transform
样式，我想在
ScrollView
滚动时更新该组件。
您能提供一个完整的插值部分示例吗？，我将以任何方式将您的答案设置为已接受：）