4

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

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

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

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

Invariant Violation: [.....,"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
                }}
            />
        )
    }

}

@hong 开发

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

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

1 回答 1

1

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

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

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

于 2019-08-26T00:50:14.163 回答