React Native 上未显示的元素

Question

电流输出：

预期输出： 当前代码实现：

import React from 'react'
import { LineChart, XAxis, YAxis } from 'react-native-svg-charts'
import { View, Text } from 'react-native'
import { Line, Circle, G, Rect, } from 'react-native-svg'
export default class Chart extends React.PureComponent {
    handleFill = (value) => {
        if (value>100){
            return "rgba(190, 30, 45, 0.5)"
        }
        else if (value>80 && value<=100){
            return "yellow"
        }
        else{
            return "#CCE6D0"
        }
    }

    render() {

        const data = [
            ...
          ];

        const values = data.map(a => a.value);
        const days = data.map(a => a.day);
        const axesSvg = { fontSize: 10, fill: 'grey' };
        const verticalContentInset = { top: 10, bottom: 10 }
        const xAxisHeight = 30
        
        const Decorator = ({x, y, data}) => {
            return values.map((value, index) => (
            <View>
                <View style={{marginBottom:50}}>
                <Rect 
                    x={x(index)-1.75} 
                    y={y(value+8)} 
                    width="4" 
                    height="40" 
                    fill={this.handleFill(value)} 
                />
                </View>
                <Circle
                    key={index}
                    cx={x(index)}
                    cy={y(value)}
                    r={2}
                    stroke={'#639123'}
                    fill={'#606060'}
                    
                />
            </View>
            ));
          };
        return (
            <View>
                <Text style={{fontSize:10}}>BPM</Text>
                <View style={{ height: 200,  flexDirection: 'row' }}>
                    <YAxis
                        ...  
                    />
                    <View style={{ flex: 1, marginLeft: 10 }}>
                        <LineChart
                            ...
                        >
                            <Decorator />
                           
                        </LineChart>
                        <XAxis
                            ....
                        />
                    </View>
                </View>
            </View>
        )
    }

}

我正在使用 react-native-svg-charts 库来呈现带有自定义处理程序的折线图。 从代码中可以看出，处理程序由一个圆圈和一个矩形组成，它们根本不显示。这可能是库版本问题吗？我已将 react-native-svg 和 react-native-svg-charts 更新到最新版本。我错过了什么？有什么想法吗？

Answer 1

我已经让它像这样工作了：

import React from 'react';
import {LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import {View, Text} from 'react-native';
import {Svg, Line, Circle, G, Rect} from 'react-native-svg';

export default class CustomLineChartOne extends React.PureComponent {
  handleFill = (value) => {
    if (value > 100) {
      return 'rgba(190, 30, 45, 0.5)';
    } else if (value > 80 && value <= 100) {
      return 'yellow';
    } else {
      return '#CCE6D0';
    }
  };

  render() {
    const xAxisLabels = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24];

    const Decorator = ({x, y, data}) => {
      return data.map((value, index) => (
        <View>
          <Rect
            x={x(index) - 1.75}
            y={y(value + 8)}
            width="4"
            height="40"
            rx="2"
            fill={this.handleFill(value)}
          />
          <Circle
            key={index}
            cx={x(index)}
            cy={y(value)}
            r={2}
            stroke={'#639123'}
            fill={'#606060'}
          />
        </View>
      ));
    };

    return (
      <View
        style={{
          height: 200,
          flexDirection: 'row',
          padding: 20,
        }}>
        <YAxis
          data={data}
          contentInset={{top: 20, bottom: 20}}
          svg={{
            fill: 'black',
            fontSize: 10,
          }}
        />
        <View style={{flex: 1}}>
          <LineChart
            style={{flex: 1}}
            data={data}
            svg={{stroke: 'rgb(134, 65, 244)'}}
            contentInset={{top: 10, bottom: 10, left: 10, right: 10}}>
            <Decorator />
          </LineChart>
          <XAxis
            style={{marginHorizontal: -10}}
            data={data}
            formatLabel={(value, index) => xAxisLabels[index]}
            contentInset={{left: 10, right: 10}}
            svg={{fontSize: 10, fill: 'black'}}
          />
        </View>
      </View>
    );
  }
}

这里要查看的重要部分是如何定义data 和xAxisLabels，如何格式化标签以及如何在装饰器中映射data 以创建条形和圆形。

由于您遗漏了一些重要部分，因此尚不完全清楚代码的确切问题是什么，但我认为问题主要与您如何设置数据有关。

---

结果如下：