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

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。

只需stroke即可。

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

Answer 1

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

一个完整的例子是：

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