代码之家  ›  专栏  ›  技术社区  ›  Rathma

将原生flex布局与VictoryChart、Chart匹配到父容器

  •  1
  • Rathma  · 技术社区  · 6 年前

    我有以下渲染功能:

    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 但这没有帮助!)

    下面是它现在的预览: enter image description here

    这是我的简单设计风格表:

    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'
        }
    });
    
    2 回复  |  直到 6 年前
        1
  •  7
  •   needsleep    6 年前

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

    虽然这并不完美,但我会为图表设置一个最小高度。我的意思是,如果可用空间太小,它看起来就不好看了。 在这种情况下,您可以将屏幕包装在滚动视图中。

        2
  •  -1
  •   Alireza Rahmani Khalili    6 年前

    每个flex容器都是一个flex,请尝试将组件分成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