如何在 React Native 中实现类似 CoordinatorLayout 的功能？

Question

我想实现像 android 的 CoordinatorLayout enter always for my ToolBar 我尝试了太多的解决方案有些确实有效但不完全像 https://github.com/maolion/mao-rn-android-kit 这真的很酷但有一个挫折因为它不适用于 ListView 我也尝试过 Animated 但是 android 上的滚动事件限制在大多数时候都不起作用它甚至不起作用。

使用 mao-rn-android-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 样式，我想在 ScrollView 滚动时更新该组件。

如何在 React Native 中实现类似 CoordinatorLayout 的功能？

How to achieve something like CoordinatorLayout in React Native?

android

native

react-native