высота базовой карты не регулируется - PullRequest
Новая
       16

высота базовой карты не регулируется

0 голосов
/ 03 июля 2019

У меня есть карточка с 2 вкладками внутри. Если на одной вкладке больше текста, чем на другой, высота более высокой вкладки будет перенесена на более короткую вкладку. В идеале каждая карта должна иметь фиксированную высоту, а для большего объема содержимого она будет добавлять полосу прокрутки вместо расширения всей карты.

image

image

Код карты: 

<Card style={HomeStyles.card}>
    <Tabs initialPage={0} tabBarUnderlineStyle={{ backgroundColor: 'orange' }} onChangeTab={({ i }) => this.tabChanged(i)}>
        <Tab heading={
            <TabHeading style={{ backgroundColor: '#1f1e1e' }}>
                <Icon type={this.props.iconType} name={this.props.iconName} style={HomeStyles.cardHeaderIcon} />
                <Text>{this.props.tabName}</Text>
            </TabHeading>} style={HomeStyles.cardBody}>
            {this.props.mainTab}
        </Tab>
        <Tab heading={
            <TabHeading style={{ backgroundColor: '#1f1e1e' }}>
                <Icon type="FontAwesome" name="info-circle" style={HomeStyles.cardHeaderInfoTabIcon} />
                <Text>Info</Text>
            </TabHeading>} style={HomeStyles.cardBody}>
            {this.props.infoTab}
        </Tab>
    </Tabs>
</Card>

// И стили 

const HomeStyles = StyleSheet.create({
    card: {
        flex: 1,
        marginLeft: 10,
        marginRight: 10,
        marginTop: 15,
        marginBottom: 20,
        borderRadius: 1,
        borderWidth: 2,
        borderColor: BackgroundColor,

    },
    cardHeader: {
        backgroundColor: BackgroundColor,
        height: 15
    },
    cardHeaderIcon: {
        fontSize: 15,
        color: '#ffa31a'
    },
    cardHeaderText: {
        color: '#fff',
        fontSize: 15,
    },
    cardHeaderInfoTabIcon: {
        fontSize: 15,
        color: '#70fff7'
    },
    cardBody: {
        borderColor: '#ffa31a',
        backgroundColor: BackgroundColor,

    },
    cardBodyText: {
        alignItems: 'center',
        color: '#fff',
        fontSize: 12
    },
    cardButton: {
        height: 25,
        width: 100,
        margin: 5, alignSelf: "center"

    }

});
...