用react-native-chart-kit图表填充父容器（React Native，Expo）

Question

我正在react-native-chart-kitReact Native Expo 应用程序中使用来渲染图表。文档中提供的示例工作正常

问题：在我的应用程序中，需要图表来填充父容器，但图表似乎必须将 propsheight作为固定值。

<LineChart
    height={221}
    ...
/>

尝试将值设置height为100%或删除定义将导致 NaN 相关错误

不变违规： [.....,"y1":"<>","x2":"375","y2":"<>"}] 不能用作本机方法参数

这个问题有解决办法吗？谢谢你！

基于文档的工作示例

export default class Chart extends Component {

    render() {
        const data = {
            datasets: [{
                data: [
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100
                ]
            }]
        }

        return (
            <LineChart 
                data={data}
                width={Dimensions.get('window').width}
                height={221}
                yAxisLabel={'$'}
                chartConfig={{
                    backgroundColor: '#e26a00',
                    backgroundGradientFrom: '#fb8c00',
                    backgroundGradientTo: '#ffa726',
                    decimalPlaces: 2, // optional, defaults to 2dp
                    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    style: {
                        borderRadius: 16
                    }
                }}
                bezier
                style={{
                    marginVertical: 8,
                    borderRadius: 16
                }}
            />
        )
    }

}                   

---

@洪开发

该react-native-chart-kit组件<LineChart />可以是另一个高度可变的组件的子组件。所以<LineChart />不一定有 给出的高度Dimensions.get('window').height;。例如，

render() {
    <View>
        <Header />
        { this.props.foo ? this.renderFoo() : null }
        <View>
            <LineChart 
                ...
            />
        </View>
    </View>
}

Answer 1

的类型height是number. 因此，string values是不允许的。如果你想替换你正在尝试做的事情，你可以使用它。

const screenheight = Dimensions.get('window').height;
<LineChart
    height={screenheight}
    ...
/>

参考这个文档可以看到，不设置高度就看不到图表。因为宽度和高度是由设定值设定的，所以必须无条件记下该值。