React native 将本机flex布局与VictoryChart、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>
    );
}

---

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

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

const chartHeight=尺寸。获取（“窗口”）。高度*0.3；
const chartWidth=尺寸.get（“窗口”）.width；
//风格
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#F5FCFF”，
},
标题：{
弹性：1，
背景颜色：“#e7fe52”
},
服务：{
弹性：4，
背景颜色：“#20fe23”
},
图表：{
//从这里移除flex
背景颜色：“#4fccb0”
}
});

虽然这并不完美，但我会为图表设置一个最小高度。我的意思是如果可用空间太小，它看起来就不好看了。

---

在这种情况下，你可以将屏幕包装在一个滚动视图中。

问题是图表有一个固定的高度，而不管它的父级是什么，如果父级的高度小于300，它就不会缩放。这个答案完全是错误的。你使用哪个库来创建VictoryChart？@HaiderAli如何将其固定的父级转换为祖父母？也许会很模糊，我想我也是这么做的，如果我能用我的电脑，我会尝试一下。我逐渐意识到我想要的设计不是很传统，我对移动开发还不熟悉。也许我把web开发和移动设备混合在一起，在移动设备中，一切都应该被修复！对我来说，布局中的奇怪之处在于图表（这是屏幕中一个重要且令人印象深刻的元素）位于屏幕底部，感觉就像你试图将其压缩到屏幕底部，以适应所有屏幕大小。元素不必固定在移动设备上，您可以在必要时使用ScrollView:）。只要确定一个让你的图表看起来不错的高度，让它在短高度设备上滚动即可。听起来，这不是实际的设计，我只是想开始一个简单的项目，看看在RN中做一个项目有多困难（我们有web开发背景）这段经历并不成功：）你应该再给它一次机会：）它并不完美，但当你掌握了窍门，你就会意识到它给人留下了深刻的印象。我也是一名网络开发人员，一开始很挣扎，但我找不到一个类似的框架，可以用共享的代码库生成本地iOS和android应用程序。。。

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