Как установить 'collapsibleComponent' в фоновом режиме при свертывании? - Реактивно-Родной - PullRequest
Новая
       14

Как установить 'collapsibleComponent' в фоновом режиме при свертывании? - Реактивно-Родной

0 голосов
/ 18 октября 2019

Я использую react-navigation-collapsible, чтобы свернуть картинку под заголовком при прокрутке списка вниз. Тем не менее, я хотел бы установить изображение на фоне списка, потому что на данный момент список идет под изображением.

Код, который я использую: 

    import React, { Component } from 'react';
import {
    Text,
    Image,
    FlatList,
    View,
    Animated,
    TouchableOpacity,
    TextInput,
} from 'react-native';

import { withCollapsible } from 'react-navigation-collapsible';

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

class MultiSelectExample extends Component {
    static navigationOptions = {
       title: "Food"
    };

    constructor(props) {
        super(props);

        const data = [];
        for (let i = 0; i < 60; i++) {
            data.push(i.toString());
        }

        this.state = {
            data: data,
        };
    }

    renderItem = ({ item }) => (
        <TouchableOpacity
            onPress={() => {
                this.props.navigation.navigate('DetailScreen');
            }}
            style={{
                width: '100%',
                height: 50,
                borderBottomColor: '#0002',
                borderBottomWidth: 0.5,
                paddingHorizontal: 20,
                justifyContent: 'center',
            }}>
            <Text style={{ fontSize: 22 }}>{item}</Text>
        </TouchableOpacity>
    );

    render() {
        const { paddingHeight, animatedY, onScroll } = this.props.collapsible;
        const { searchText } = this.props.navigation.state.params
            ? this.props.navigation.state.params
            : {};
        const data = searchText
            ? this.state.data.filter(item => item.includes(searchText))
            : this.state.data;

        return (
            <AnimatedFlatList
                style={{ flex: 1 }}
                data={data}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => String(index)}
                contentContainerStyle={{ paddingTop: paddingHeight }}
                scrollIndicatorInsets={{ top: paddingHeight }}
                onScroll={onScroll}
                _mustAddThis={animatedY}
            />
        );
    }
}

const SearchBar = ({ navigation, collapsible }) => {
    // eslint-disable-next-line no-unused-vars
    const { translateY, translateOpacity, translateProgress } = collapsible;
    const { searchText } = navigation.state.params ? navigation.state.params : {};
    return (
        <View
            >

                <Image
                    source={require('./pictures/Fast-Food-Free-PNG-Image.png')}
                    style={{ width: 250, height: 200 }}
                ></Image>

        </View>
    );
};

const collapsibleParams = {
    collapsibleComponent: SearchBar,

    collapsibleBackgroundStyle: {
        height: 250,
        backgroundColor: '#061',
        // disableFadeoutInnerComponent: true,
    },
};

export default withCollapsible(MultiSelectExample, collapsibleParams);
...