Invariant Violation When Using 'dashedBackground' Prop
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 35/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- javascript, react-native
- 领域
- mobile
调研方向
使用 Expo 3.0.9、软件包版本 1.3.4 以及所示的 dashedBackground prop 重现示例应用。首先从 CircularProgress.js:100 和 RNSVGPath 错误入手,然后验证该 prop 不再产生 NaN 值或原生 invariant 失败。
由索引模型根据 Issue 内容生成。
描述
I got error when I try to use dashedBackground prop with the example app
My expo version is 3.0.9 and I am using 1.3.4 version of the package
Component Usage:
<AnimatedCircularProgress
size={200}
width={3}
backgroundWidth={30}
fill={fill}
tintColor="#00e0ff"
backgroundColor="#3d5875"
dashedBackground={{ width: 1, gap: 1 }}
>
{fill => <Text style={styles.points}>{Math.round((MAX_POINTS * fill) / 100)}</Text>}
</AnimatedCircularProgress>
Error:
Invariant Violation: [3,"RNSVGPath",11,{"matrix":[1,0,0,1,0,0],"propList":["fill","stroke","strokeWidth","strokeDasharray","strokeLinecap"],"opacity":1,"fill":[0,0],"fillRule":1,"fillOpacity":1,"stroke":[0,4282210421],"strokeOpacity":1,"strokeLinecap":0,"strokeLinejoin":0,"strokeDasharray":[1,"<<NaN>>","<<NaN>>",1],
"strokeWidth":30,"strokeDashoffset":0,"strokeMiterlimit":4,"vectorEffect":0,"d":"M 99.94659292840299 15.000016778326938 A 85 85 0 1 0 100 15"}] is not usable as a native method argument
This error is located at:
in RNSVGPath (at Path.js:12)
in Path (at CircularProgress.js:100)
in RNSVGGroup (at G.js:23)
in G (at CircularProgress.js:98)
in RNSVGGroup (at G.js:23)
in G (at Svg.js:127)
in RNSVGSvgView (at Svg.js:116)
in Svg (at CircularProgress.js:97)
in RCTView (at View.js:45)
in View (at CircularProgress.js:96)
in CircularProgress (at createAnimatedComponent.js:151)
in AnimatedComponent (at AnimatedCircularProgress.js:65)
in AnimatedCircularProgress (at App.tsx:56)
in RCTView (at View.js:45)
in View (at App.tsx:55)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:253:8 in enqueueNativeCall
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:8 in fn
- ... 21 more stack frames from framework internals
Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- ... 28 more stack frames from framework internals
Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.
[[152,152],[5,5],[[5,"RCTRawText",11,{"text":"0"}]],9]
This error is located at:
in RCTText (at Text.js:154)
in TouchableText (at Text.js:278)
in Text (at App.tsx:65)
in RCTView (at View.js:45)
in View (at CircularProgress.js:121)
in RCTView (at View.js:45)
in View (at CircularProgress.js:96)
in CircularProgress (at createAnimatedComponent.js:151)
in AnimatedComponent (at AnimatedCircularProgress.js:65)
in AnimatedCircularProgress (at App.tsx:56)
in RCTView (at View.js:45)
in View (at App.tsx:55)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:271:39 in enqueueNativeCall
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:8 in fn
- ... 21 more stack frames from framework internals
Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- ... 28 more stack frames from framework internals
- 主要语言
- JavaScript
- 星标
- 2.2k
- 派生
- 417
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南,环境需要你自己搭建:先看它的 README,通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
bartgryszko/react-native-circular-progress 的其他 Issue
-
难度 1/5 1 小时以内 新手友好度 65/100
-
难度 5/5 一周以上 新手友好度 35/100
-
难度 5/5 一周以上 新手友好度 10/100
bartgryszko/react-native-circular-progress#332 · 1 条评论 ·
-
难度 1/5 1 小时以内 新手友好度 55/100
bartgryszko/react-native-circular-progress#330 · 4 条评论 · 1 个 reaction ·
-
难度 1/5 1 小时以内 新手友好度 55/100
查看 bartgryszko/react-native-circular-progress 的全部 Issue
相似的 Issue
-
check:passed feeds:add
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 76/100
-
难度 1/5 1 小时以内 新手友好度 75/100
SACGF/variantgrid#2791 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 82/100
hiero-ledger/hiero-sdk-js#4761 ·
维护者通常 1 天内回复