Реагируйте на Native, динамически настраивайте scrollIndicatorInsets ScrollView / FlatList - PullRequest
Новая
       20

Реагируйте на Native, динамически настраивайте scrollIndicatorInsets ScrollView / FlatList

0 голосов
/ 05 марта 2020

Можно ли динамически изменять значения scrollIndicatorInsets в React Native. Я попытался сделать это, используя переменную, которая корректируется при прокрутке экрана, но получаю неизменное нарушение.

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

Var установлен на Render 

VSScroll = this.state.scrollY.interpolate({
            inputRange: [0, 88, 89],
            outputRange: [144, 88, 88]
        });

Return 

<Animated.ScrollView
    scrollIndicatorInsets={[VSScroll, 0, 52, 0]}
    onScroll={Animated.event([
                    { nativeEvent: {
                    contentOffset: { y: this.state.scrollY }
                    }
                }],
                { useNativeDriver: true }
            )} >

... etc.

Переменная VSScroll вызывает нарушение инварианта, несмотря на то, что проверки журнала консоли показывают, что она генерирует число, необходимое для создания вставки.

1 Ответ

0 голосов
/ 05 марта 2020

Возможно, но scrollIndicatorInset будет работать с собственным событием прокрутки. Однако он примет переменную и, следовательно, может принять состояние.

Итак,

Создать состояние в конструкторе 

this.state= {
    insetOffset: 140,
}

Добавьте слушателя к анимированному событию onScroll с собственным событием, связанным с функцией (например, handleOnScroll ) 

onScroll={
    Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
        { 
            listener: (event) => this.handleOnScroll(event.nativeEvent.contentOffset.y), 
            useNativeDriver: true, 
        }
    )
}

Затем используйте функцию для возврата желаемое значение для государства. (Поместите функцию между Конструктором и Визуализатором. 

handleOnScroll = event => {
        var offset = 140 - event;
        if(event > 98){
            offset = 140 - 98
        }
        this.setState({
            insetOffset: offset
        })
    }

Измените значение scrollIndicatorInset, включив в него состояние 

<Animated.ScrollView
    scrollIndicatorInsets={{top: this.state.insetOffset, left: 0, bottom: 52, right:0}}

QED. .

...