Динамическая высота с изгибом в реагировать родной? - PullRequest
Новая
       6

Динамическая высота с изгибом в реагировать родной?

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

Я пытаюсь создать динамическое меню, которое появляется в верхней части экрана.Он должен работать примерно так: https://youtu.be/oBmrhKAxWyY

Примерная структура:
1. CustomTabBar с кнопкой меню.После нажатия кнопки заголовок должен раскрываться и показывать пункты меню, а также перемещать содержимое ActiveScreen вниз.
2. Основное содержимое страницы.(ActiveScreen)

Я использую гибкую модель для реализации этого, но мой код работает неожиданно. Основной вид: 

  <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: 

<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 имеет статический размер.

Можете ли вы помочь мне с этой проблемой?Заранее спасибо.

PS Странно, но в первом видео все работает как положено, если я заменим alignItems: "stretch" на alignItems: "flex-start" и , удалив flex: 1 в представлении CustomTabBar.

...