Question

import React from 'react';
import { Svg } from 'expo';

const { Line } = Svg;

export default class VerticalDashedLine extends React.Component {
  render() {
    return (
      <Svg height={this.props.height} width={1} >
        <Line strokeDashedArray='5, 5' x1="0" y1="0" x2="0" y2={this.props.height}/>
      </Svg>
    );
  }
}

我目前正在使用react-native-svg。

仅需行程，此功能就可以很好地工作。

但是 strokeDashedArray 不起作用（在iOS和Android上）。我在这里做错什么了吗？

Answer 1

SVG名称是stroke-dasharray而不是stroke-dashed-array，在react-native中没有kebab-case，因此您必须使用stroke-dasharray的camelCase版本，例如strokeDasharray。

一个完整的例子是：

                 <Line
                    strokeDasharray="5, 5"
                    x1=50
                    y1=0
                    x2=50
                    strokeLinecap="round"
                    y2={50}
                    style={{
                      stroke: 'white',
                      strokeWidth: 5,
                    }}
                  />

strokeDashedArray不起作用（react-native-svg）

1 个答案: