我具有以下渲染功能:
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>
);
}
我在页面的底部有某种图表,但是我不能强迫图表填充其父图表,这在其专用部分有点溢出,我该如何实现呢?(我尝试使用{{ 1}},但没有帮助!)
这是我的简单设计样式表:
flexWrap
答案 0 :(得分:2)
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中。
答案 1 :(得分:0)
每个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