Блог

Я хочу добиться поведения, подобного CoordinatorLayout Android, вводите всегда для моей панели инструментов, я перепробовал слишком много решений, некоторые из которых работали, но не полностью, какhttps://github.com/maolion/mao-rn-android-kit это действительно круто, но с одним недостатком, поскольку это не работает с ListView, я также пробовал анимацию, но дроссель события прокрутки на 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>
  

Ключом к плавному реагированию на положение прокрутки является использование 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 on this.state.scrollY и преобразовать это значение в transform стиль другого компонента, который я хотел обновить по мере ScrollView прокрутки.