react-native - 用VictoryChart响应 native Flex布局，Chart适合父容器

我有以下渲染功能：

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'
    }
});

最佳答案

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中。

关于react-native - 用VictoryChart响应 native Flex布局，Chart适合父容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53796007/