Question

我正在尝试制作动态菜单，该菜单从屏幕顶部显示。它应该像这样工作：https://youtu.be/oBmrhKAxWyY

大致结构：
1.带菜单按钮的CustomTabBar。按下按钮后，标题应展开并显示菜单项，并向下移动ActiveScreen的内容。
2.页面的主要内容。（ActiveScreen）

我正在使用flex模型来实现此目的，但是我的代码无法正常工作。 主视图：

  <View
        style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            justifyContent: "flex-start",
            alignItems: "stretch"
        }}
    >
        <CustomTabBar navigation={navigation} />
        <View style={{ flex: 1 }}>
            <ActiveScreen navigation={descriptor.navigation} />
        </View>
    </View>

CustomTabBar视图：

<View
            style={{
                display: "flex",
                flexDirection: "column",
                backgroundColor: "green",
                maxHeight: 250,
                flex: 1
            }}
        >
            <View
                style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "space-between",
                    paddingHorizontal: 30,
                    paddingTop: 21
                }}
            >
                {this.state.topbarOpened ? (
                    <MaterialIcon
                        name="search"
                        color="black"
                        size={30}
                        onPress={this.onSearchButtonPress}
                        style={{
                            alignSelf: "center"
                        }}
                    />
                ) : (
                    <SimpleLineIcon name="basket" color="black" size={30} />
                )}...and so on

ActiveScreen 很简单。

我认为它应该起作用，因为主视图具有flexDirection: "column"（内容将建立在列中），justifyContent: "flex-start"（元素将按顺序放置）和alignItems: "stretch"（元素将被放置拉伸到全宽）。但结果是：https://youtu.be/EWfoH6E_6fQ CustomTabBar视图具有静态大小。

您能帮我解决这个问题吗？提前致谢。

P.S。这很奇怪，但是如果我在第一部视频中按预期工作，则将alignItems: "stretch"替换为alignItems: "flex-start" ，然后在CustomTabBar视图中删除flex: 1。

动态高度与flex在本机吗？

0 个答案: