Реагируйте на собственный гибкий макет с помощью VictoryChart, диаграмма соответствует родительскому контейнеру

Question

У меня есть следующая функция рендеринга:

render() {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text> Header
                </Text>
            </View>
            <View style={styles.services}>
                <Text>Services</Text>
            </View>
            <View style={styles.chart}>

                <VictoryChart>
                    <VictoryLine
                        style={{
                            data: {stroke: "#c43a31"},
                            parent: {border: "1px solid #ccc"}
                        }}
                        data={[
                            {x: 1, y: 2},
                            {x: 2, y: 3},
                            {x: 3, y: 5},
                            {x: 4, y: 4},
                            {x: 5, y: 7}
                        ]}
                    />
                </VictoryChart>    
            </View>
        </View>
    );
}

У меня есть какая-то диаграмма в нижней части страницы, но я не могу заставить диаграмму заполнить ее родительский элемент. Это своего рода переполнение из выделенного раздела. Как этого добиться?(Я пытался использовать flexWrap но это не поможет!)

Вот предварительный просмотр того, как это выглядит сейчас:

А вот моя таблица стилей для этого простого дизайна:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 1,
        backgroundColor: '#e7fe52'
    },

    services: {
        flex: 4,
        backgroundColor: '#20fe23'
    },

    chart: {
        flex: 2,
        flexWrap: 'wrap',
        backgroundColor: '#4fccb0'
    }
});

Answer 1

VictoryChart, кажется, имеет высоту по умолчанию 300, и она не адаптируется к родительской высоте. Таким образом, одним из способов решения этой проблемы будет удаление атрибута flex: 2 из стиля диаграммы и добавление вычисляемых вручную измерений. Что-то вроде этого:

const chartHeight = Dimensions.get("window").height * 0.3;
const chartWidth = Dimensions.get("window").width;

<VictoryChart height={chartHeight} width={chartWidth} >
    <VictoryLine
        style={{
            data: {stroke: "#c43a31"},
            parent: {border: "1px solid #ccc"}
        }}
        data={[
            {x: 1, y: 2},
            {x: 2, y: 3},
            {x: 3, y: 5},
            {x: 4, y: 4},
            {x: 5, y: 7}
        ]}
    />
</VictoryChart>

// styles  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 1,
        backgroundColor: '#e7fe52'
    },
    services: {
        flex: 4,
        backgroundColor: '#20fe23'
    },
    chart: {
        //remove flex from here
        backgroundColor: '#4fccb0'
    }
});

Хотя это не идеально, это работает, но я бы установил минимальную высоту для графика. Я имею в виду, если доступное пространство слишком мало, оно не будет выглядеть красиво. В этом случае вы можете обернуть свой экран внутри ScrollView.

Answer 2

Каждый гибкий контейнер - это одна гибкая попытка разделить ваш компонент на 1

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 0.15,
        backgroundColor: '#e7fe52'
    },

    services: {
        flex: 0.5,
        backgroundColor: '#20fe23'
    },

    chart: {
        flex: 0.35,
        flexWrap: 'wrap',
        backgroundColor: '#4fccb0'
    }
});

0,15 + 0,5 + 0,35 = 1