javascript - 用 react-native-chart-kit 图表填充父容器(React Native，Expo)

Question

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

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

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

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

Invariant Violation: [.....,"y1":"<>","x2":"375","y2":"<>"}] is not usable as a native method argument

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

基于文档的工作示例

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>
}

Answer 1

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

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

引用this document,可以看到不设置高度就看不到图表。因为宽高是设置值，所以必须无条件记下这个值。