1

我的程序包括以下内容： 单击时将展开/折叠其正下方的组件的栏（在我的情况下为 aFlatList返回ProjectUpdatesListScreen）。这是通过使用react-native-collapsible完成的。在这两个的正下方有另一个与第一个具有相同尺寸和属性的条。（不管它们在代码中是什么组件，唯一重要的是它们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: 1inside styles.clickableBar，虽然它解决了问题，但它也将 Text 隐藏在具有这种样式的元素内，我不知道如何解决该副作用。

任何帮助将不胜感激。

4

0 回答 0