Как создать пушинг из топовой анимации в реагирующем - PullRequest
Новая
       16

Как создать пушинг из топовой анимации в реагирующем

0 голосов
/ 26 января 2019

Я хочу добавить фильтр на один из экранов моего приложения, который появляется сверху и буквально толкает текущий контент вниз, если это может быть slidable, используя палец вверх / вниз, чтобы лучше. Если нет, то нет проблем, я могу просто переключить его через ту же кнопку фильтра в заголовке.

Я использую API-анимацию от реакции-нативной. Прямо сейчас, и Animated.View, и View ниже имеют flex: 1, и я анимирую Animated.View's translateY с помощью временной анимации, которая выглядит следующим образом: 

toggleFilter() {
        if (this.state.filterOpened) {
            this.closeFilters();
        } else {
            this.openFilters();
        }
    }

    openFilters() {
        this.setState({
            filterOpened: true
        }, () => {
            Animated.timing(this.state.removeAnimation, {
                toValue: Dimensions.get('window').height,
                duration: 400,
                easing: Easing.elastic(0.5),
                useNativeDriver: true
            }).start();
        });
    }

    closeFilters() {
        this.setState({
            filterOpened: false
        }, () => {
            Animated.timing(this.state.removeAnimation, {
                toValue: -Dimensions.get('window').height,
                duration: 400,
                easing: Easing.elastic(0.5),
                useNativeDriver: true
            }).start();
        });
    }

Вот как я это использую: 

<View style={{ flex: 1}}>
    <Animated.View
       style={[styles.filterContainer, {
          transform: [
             { translateY: this.state.removeAnimation}
          ]}
       ]}>
       <Text>Hello hello hello content from filter???</Text>
    </Animated.View>
    <View style={{ flex: 1 }}>
       <Text>This is the main container in the screen</Text>
    </View>
 </View>

styles.filterContainer невероятно похож на: 

flex: 1,
padding: 15,
top: -Dimensions.get('window').height

Что я заметил, так это то, что из-за flex: 1 они занимают половину экрана, и не имеет значения, вверх или вниз панель фильтра.

Как я могу создать эффект толчка, когда фильтр толкает его вниз? Есть идеи? И было бы неплохо иметь возможность управлять им пальцем, если это возможно, но я действительно сомневаюсь в этом.

...