Question

我想实现像android这样的行为，CoordinatorLayout总是为我的ToolBar输入我尝试了太多的解决方案，有些确实有效但不完全像https://github.com/maolion/mao-rn-android-kit这真的很酷，但有一个挫折，因为它没有＆＃ 39;使用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 ...
}

然后我可以在interpolate上致电this.state.scrollY并将此值转换为另一个组件上的transform样式，我希望在滚动ScrollView时更新该样式。

如何在React Native中实现像CoordinatorLayout这样的东西？

1 个答案: