错误设置属性“d”：类型的NSString的JSON值不能转换为NSArray的

Question

更新react-native-svg后，我开始对与先前版本的工作了SVG组件此错误。该问题是与Path元件的d属性。

2017-03-07 17:06:03.253 [error][tid:main][RCTConvert.m:56] Error setting property 'd' of RNSVGPath with tag #35: JSON value 'M 40 60 A 10 10 0 0 0 60 60' of type NSString cannot be converted to NSArray 
2017-03-07 17:06:03.368 SampleApp[7590:5782919] -[__NSCFType getPath]: unrecognized selector sent to instance 0x6080004280e0 
2017-03-07 17:06:03.378 SampleApp[7590:5782919] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFType getPath]: unrecognized selector sent to instance 0x6080004280e0' 
*** First throw call stack: 
(
    0 CoreFoundation      0x000000010ae1ad4b __exceptionPreprocess + 171 
    1 libobjc.A.dylib      0x000000010967121e objc_exception_throw + 48 
    2 CoreFoundation      0x000000010ae8af04 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132 
    3 CoreFoundation      0x000000010ada0005 ___forwarding___ + 1013 
    4 CoreFoundation      0x000000010ad9fb88 _CF_forwarding_prep_0 + 120 
    5 SampleApp       0x0000000108bde393 -[RNSVGPath setD:] + 163 
    6 SampleApp       0x0000000108bbbf1b __49-[RCTComponentData propBlockForKey:inDictionary:]_block_invoke.223 + 299 
    7 SampleApp       0x0000000108bbcb40 __49-[RCTComponentData propBlockForKey:inDictionary:]_block_invoke.259 + 720 
    8 SampleApp       0x0000000108bbceb8 __49-[RCTComponentData propBlockForKey:inDictionary:]_block_invoke_2.272 + 40 
    9 SampleApp       0x0000000108b580b3 RCTPerformBlockWithLogFunction + 483 
    10 SampleApp       0x0000000108b5826f RCTPerformBlockWithLogPrefix + 239 
    11 SampleApp       0x0000000108bbce1d __49-[RCTComponentData propBlockForKey:inDictionary:]_block_invoke.267 + 445 
    12 SampleApp       0x0000000108bbd315 __37-[RCTComponentData setProps:forView:]_block_invoke + 181 
    13 CoreFoundation      0x000000010ada1dc6 __65-[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:]_block_invoke + 102 
    14 CoreFoundation      0x000000010ada1cca -[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:] + 202 
    15 SampleApp       0x0000000108bbd17f -[RCTComponentData setProps:forView:] + 223 
    16 SampleApp       0x0000000108ba3202 __50-[RCTUIManager createView:viewName:rootTag:props:]_block_invoke + 162 
    17 libdispatch.dylib     0x000000010f3f6978 _dispatch_call_block_and_release + 12 
    18 libdispatch.dylib     0x000000010f4200cd _dispatch_client_callout + 8 
    19 libdispatch.dylib     0x000000010f4008a4 _dispatch_main_queue_callback_4CF + 406 
    20 CoreFoundation      0x000000010addee49 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9 
    21 CoreFoundation      0x000000010ada437d __CFRunLoopRun + 2205 
    22 CoreFoundation      0x000000010ada3884 CFRunLoopRunSpecific + 420 
    23 GraphicsServices     0x0000000110d21a6f GSEventRunModal + 161 
    24 UIKit        0x000000010dad9c68 UIApplicationMain + 159 
    25 SampleApp       0x0000000108abe5ef main + 111 
    26 libdyld.dylib      0x000000010f46c68d start + 1 
) 
libc++abi.dylib: terminating with uncaught exception of type NSException2017-03-07 17:06:03.411 [info][tid:com.facebook.react.JavaScript] 

这个问题似乎是在解析d属性在getPath方法：受影响 RNSVGPathParser.m

版本：

react-native-svg：5.1.3，4.6.1，4.6.0

react-native：0.42， 0.41.2

react：15.4.2

的问题[email protected]版本arised，大概this commit。

线崩溃（仅在iOS测试）：

- (void)setD:(RNSVGPathParser *)d 
{ 
    if (d == _d) { 
     return; 
    } 

    [self invalidate]; 
    _d = d; 
    CGPathRelease(_path); 
    _path = CGPathRetain([d getPath]);// EXCEPTION THROWN HERE 
} 

的RN组分（based on GitHub sample code）：

import React, { Component } from 'react'; 
import Svg,{ 
    Circle, 
    Ellipse, 
    G, 
    LinearGradient, 
    RadialGradient, 
    Line, 
    Path, 
    Polygon, 
    Polyline, 
    Rect, 
    Symbol, 
    Text, 
    Use, 
    Defs, 
    Stop 
} from 'react-native-svg'; 
export default class SampleSVG extends Component { 
    render() { 
    return (
     <Svg 
     height="100" 
     width="100" 
     > 
     <Rect x="0" y="0" width="100" height="100" fill="black" /> 
     <Circle cx="50" cy="50" r="30" fill="yellow" /> 
     <Circle cx="40" cy="40" r="4" fill="black" /> 
     <Circle cx="60" cy="40" r="4" fill="black" /> 
     <Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" /> 
     </Svg> 
    ); 
    } 
} 

Answer 1

我使用的版本4.5.0，其不具有此问题，并打开一个问题在他们的存储库。