本机基卡高度未调整

Question

我有一张带有2个标签的卡。如果一个标签页上的文字多于另一个标签页，则较高标签页的高度将被强制显示在较短的标签页上。理想情况下，每张卡的高度都应固定，并且要包含更多内容，它会添加滚动条而不是扩展整个卡。

卡代码：

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

    }

});