使用 VictoryChart 反应原生 flex 布局，图表适合父容器答案

【问题标题】：React native flex layout with VictoryChart, Chart fit the parent container使用 VictoryChart 反应原生 flex 布局，图表适合父容器
【发布时间】：2019-05-16 16:27:24
【问题描述】：

我有以下渲染功能：

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

我在页面底部有某种图表，但我不能强制图表填充其父级，它从其专用部分溢出，我该如何实现？（我尝试使用 @987654325 @ 但这无济于事！）

这是它现在的样子的预览：

这是我的这个简单设计的样式表：

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 使用哪个库？
@HaiderAli github.com/FormidableLabs/victory-native
把它的固定父代转为祖代怎么样？可能会很模糊
我想我也是这样做的，如果我能在我的电脑上尝试一下。

标签： react-native layout flexbox react-native-android victory-charts

【解决方案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 中。

【讨论】：

我开始意识到我想要的设计不是很传统，我是移动开发的新手。也许我正在将网络开发与移动设备混合在一起，而在移动设备中，一切都应该得到修复！
对我来说，布局中的奇怪之处在于图表（这是屏幕中一个重要且令人印象深刻的元素）位于屏幕底部，感觉就像您在尝试挤压它那里可以容纳所有屏幕尺寸。元素不必固定在移动设备上，您可以在需要时使用 ScrollView :)。只需确定一个让您的图表看起来不错的高度，然后让它在短高度设备上滚动即可。
听起来不错，这不是实际的设计，我只是想开始一个简单的项目，看看用RN做一个项目有多难（我们有Web开发背景），这个经验不是成功:))
你应该再给它一次机会 :) 它并不完美，但是当你掌握它的窍门时，你会发现它非常令人印象深刻。我也是一名网络开发人员，一开始很挣扎，但我找不到一个类似的框架可以生成具有共享代码库的原生 iOS 和 android 应用程序......

【解决方案2】：

每个 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

【讨论】：

问题是图表有一个固定的高度不管它的父级，如果父级高度小于300，它不会缩放
这个答案绝对是假的