我有以下渲染函数:
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 中。
关于layout - React native flex layout with VictoryChart, Chart适合父容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53796007/