Как отображать элементы после <Collapsible>, внутри экрана? - PullRequest
Новая
       7

Как отображать элементы после <Collapsible>, внутри экрана?

0 голосов
/ 22 ноября 2018

Моя программа состоит из следующих элементов: панель, при нажатии которой будет развернут / свернут компонент прямо под ним (в моем случае FlatList, возвращаемый ProjectUpdatesListScreen).Это делается с помощью реагировать-родной-складной .Прямо под этими двумя находится еще одна полоса с теми же размерами и свойствами, что и у первой.(Независимо от того, какие компоненты они есть в коде, единственное, что имеет к ним отношение, это StyleSheet.)за пределами экрана, когда он должен оставаться в пределах экрана.

Мой код следующий: 

import { Image, Linking, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Collapsible from 'react-native-collapsible';
import { ListItem } from 'react-native-elements';

export default class CreateUpdateScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            updatesIsOpen: true,
        };
    }
    render() {
        return (

            <View style={styles.parentWrapper}>
                <View style={styles.childWrapper}>
                    <TouchableOpacity style={styles.clickableBar} onPress={() => this.setState(prevState => ({ updatesIsOpen: !prevState.updatesIsOpen }))}>
                        <Text style={styles.accordionTitle}>Updates</Text>
                    </TouchableOpacity>
                    <Collapsible collapsed={!this.state.updatesIsOpen}>
                        <ProjectUpdatesListScreen projectKey={project.key} />
                    </Collapsible>
                    <TouchableOpacity style={styles.clickableBar}>
                        <Text style={styles.accordionTitle}>Random</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    parentWrapper: {
        flex: 1,
    },
    childWrapper: {
        backgroundColor: 'orange',
    },
    clickableBar: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'pink',
    },
    accordionTitle: {
        color: 'rgb(52, 71, 117)',
        letterSpacing: 0.64,
        fontSize: 14,
    },
    accordionChevron: {
        color: 'rgb(52, 71, 117)',
        fontSize: 30,
    }
});

Возможное направление решения:

Я попытался добавить flex: 1 внутри styles.clickableBar, и, хотя это решает проблему, он также скрывает текст внутри элементов с этим стилем, и я понятия не имею, как исправить этот побочный эффект.

ЛюбойПомощь будет принята с благодарностью.

...