React-native: NullPointerException:尝试调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'

创建于 2018-01-11  ·  294评论  ·  资料来源: facebook/react-native

这是错误报告吗?

您阅读过《贡献准则》吗?

是的,很抱歉,除了该堆栈跟踪信息之外,我无法提供有关此异常的更多信息,因为崩溃报告是从Google Analytics(分析)收集的,我不知道会再次出现此异常。

环境

环境:
作业系统:macOS Sierra 10.12.6
节点:8.4.0
纱:0.27.5
npm:5.4.0
Android Studio:3.0

软件包:(需要=>已安装)
反应本机:0.51.0 => 0.51.0
反应:16.0.0-alpha.12 => 16.0.0-alpha.12

目标平台:Android(7.1.1)
手机:MIX 2
的安卓:7.1.1
java.lang.NullPointerException:
尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild(DrawableContainer.java:888)在
android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466)在
android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.view.View.drawableStateChanged(View.java:18002)在
android.widget.TextView.drawableStateChanged(TextView.java:4097)在
android.view.View.refreshDrawableState(View.java:18071)在
android.view.View.setPressed(View.java:8543)在
android.view.View.setPressed(View.java:8521)在
android.view.View.onTouchEvent(View.java:11218)在
android.widget.TextView.onTouchEvent(TextView.java:8467)在
com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

Bug Android Ran Commands

最有用的评论

这个问题也导致我们的应用在生产中也崩溃了。 这是一个令人讨厌的错误,因为它确实很难复制。 我们已经为我们的应用找到了一个有希望的修复程序,我想在这里分享我们的发现,以希望为其他人节省一些时间和沮丧。

规格和版本

此错误已导致我们的应用在三星,谷歌和LG Android设备上崩溃。 我们提供了以下Android版本的崩溃报告:

  • 8.0.0
  • 8.1.0
  • 7.1.1

我们的应用正在运行:

  • react-native :0.53.0
  • react :16.2.0

是什么原因导致车祸

就像该线程中的其他人指出的那样,该问题似乎是由于呈现TextInputFlatListScrollView组件的某种组合而触发的。 在我们的例子中,我们有一个屏幕,其中包含一个在FlatList上方呈现的单个TextInput FlatList 。 点击FlatList中的一项时,应用程序导航到包含表单的新屏幕。 此表单的根组件是ScrollView ,其中包含许多TextInput组件(以及一些按钮和其他自定义组件)。 当用户点击这些FlatList项之一时,我们的应用程序崩溃(请注意,它不会每次都发生)。

重现此问题很困难。 实际上,我们一直无法做到这一点。 但是,我们通过观看Appsee会话记录知道崩溃发生在工作流中。

由于无法重现该问题,因此我们不得不依靠Appsee的崩溃日志进行调试。 我已经从下面的崩溃报告中复制了堆栈跟踪(并省略了一些嘈杂的部分)。 它与其他线程在此线程中发布的堆栈跟踪大致相同:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

问题的根源

阅读完该线程并进行了几个小时的研究后,我在ReactTextInputManager.java文件中找到了underlineColorAndroid prop处理程序

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="10">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

注释中链接到的错误报告包含以下堆栈跟踪:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

这与我们在应用程序中遇到的堆栈跟踪相匹配。 我不假装完全理解潜在的问题,但似乎我们的应用程序在生产中崩溃的原因是由于触发了Drawable.mutate()错误。 当我们尝试在TextInput组件上设置underlineColorAndroid道具(并因此调用ReactTextInputManager.setUnderlineColor方法)时,就会发生这种情况。

我们的应用正在渲染具有以下道具的TextInput ,其中一个是underlineColorAndroid="transparent"

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

我们如何解决它

我们需要设置此道具,以便从应用程序中的TextInput组件中删除下划线。 但是根据我们的发现,其道具处理程序似乎正在触发Android错误,导致该应用偶尔崩溃。

幸运的是,还有另一种方法可以删除Android上TextInput组件中的下划线。 您可以在android/app/src/main/res/values/styles.xml文件中添加一行:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="16">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="17">@android</strong>:color/transparent</item>
    </style>
</resources>

请注意,我也看到了以下建议,但这并没有消除我们的下划线:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="22">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="23">@android</strong>:color/transparent</item>
+   </style>
</resources>

这不能解决根本问题。 这只是一种解决方法,涉及避免在TextInput组件上使用underlineColorAndroid prop。

我尚不能肯定地说这确实可行,因为我无法在本地重现该问题。 在接下来的几周内,我们将在我们的应用程序更新中部署此更改。 在那之后,我们将不得不等待一段时间,看看它是否再次发生。 我将尽力报告我们的发现。

祝大家在这个令人沮丧的问题上苦苦挣扎! 我希望这有帮助。

所有294条评论

面临同样的问题。

同样在这里[email protected]

com.facebook.react.views.textinput.ReactEditText.onTouchEvent
ReactEditText.java - line 163
java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1
android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild DrawableContainer.java:884
2
android.graphics.drawable.DrawableContainer.selectDrawable DrawableContainer.java:466
3
android.graphics.drawable.StateListDrawable.onStateChange StateListDrawable.java:104
4
android.graphics.drawable.Drawable.setState Drawable.java:736
5
android.graphics.drawable.DrawableWrapper.onStateChange DrawableWrapper.java:331
6
android.graphics.drawable.Drawable.setState Drawable.java:736
7
android.view.View.drawableStateChanged View.java:19223
8
android.widget.TextView.drawableStateChanged TextView.java:4673
9
android.view.View.refreshDrawableState View.java:19292
10
android.view.View.setPressed View.java:9135
11
android.view.View.setPressed View.java:9113
12
android.view.View.onTouchEvent View.java:12357
13
android.widget.TextView.onTouchEvent TextView.java:10095
14
com.facebook.react.views.textinput.ReactEditText.onTouchEvent ReactEditText.java:163

同一期

同样的问题。 相同的日志跟踪

在RN 44.0上也是如此

+1 anotha'one

伙计们重新启动打包程序并清除缓存对我有用!

对我来说也是一样。 我正在使用RN 0.51.0和react-native-material-textfield 0.12.0。

我也面临着这个问题。 奇怪的是,由于堆栈跟踪不包含任何有用的信息,因此很难跟踪错误。 我什至不知道错误可能在哪里。
如果我找到解决方案,将在这里更新

RN 0.52.0上发生相同的错误。

感谢您发布! 看来您可能没有使用2018年1月发布的最新版本的React Native v0.53.0。您可以确定仍然可以在最新版本中重现此问题吗?

我将关闭此问题,但是如果您能够确认v0.53.0或更高版本中仍然存在问题,请随时打开一个新问题。

如何贡献维护者的期望

0.53.3上的相同问题

同一期

@ react-native-bot需要重新打开问题

Android 8面临同样的问题

同样在这里。 React native 0.53.3,SM-T550,API级别25(Android 7.0)

这个问题随即出现,React native 0.53.3-Android 8.1。

React Native 0.53.3,Android 8,相同问题

同样的问题,react-native 0.53.0和android8。奇怪的是,此错误似乎随机出现。 我找不到任何确切的步骤来重现它。

拥有运行RN 0.54.2的生产应用程序,这似乎会影响一些在应用程序启动时运行Android 8.0.0的用户。

selection_024

为什么关闭此问题? 我们中的一些人在生产环境中面临此问题,因此“重新启动包装器”不是可接受的解决方案。

由于该问题影响当前版本,因此需要重新打开。

我还面临可能与之相关的堆栈跟踪:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:16791)
       at android.view.View.setBackgroundDrawable(View.java:21710)
       at android.view.View.setBackground(View.java:21603)
       at android.view.View.<init>(View.java:5547)
       at android.widget.TextView.<init>(TextView.java:1135)
       at android.widget.EditText.<init>(EditText.java:107)
       at android.widget.EditText.<init>(EditText.java:103)
       at android.widget.EditText.<init>(EditText.java:99)
       at android.widget.EditText.<init>(EditText.java:95)
       at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:92)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:94)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:65)
       at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:46)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:218)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:150)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:923)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:895)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:136)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:107)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
       at android.view.Choreographer.doCallbacks(Choreographer.java:723)
       at android.view.Choreographer.doFrame(Choreographer.java:655)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
       at android.os.Handler.handleCallback(Handler.java:789)
       at android.os.Handler.dispatchMessage(Handler.java:98)
       at android.os.Looper.loop(Looper.java:164)
       at android.app.ActivityThread.main(ActivityThread.java:6938)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)
Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.DrawableContainer$DrawableContainerState$ConstantStateFuture.get(android.graphics.drawable.DrawableContainer$DrawableContainerState)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:823)
       at android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:452)
       at android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)
       at android.graphics.drawable.Drawable.setState(Drawable.java:680)
       at android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:279)
       at android.graphics.drawable.Drawable.setState(Drawable.java:680)
       at android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1381)
       at android.graphics.drawable.Drawable.setState(Drawable.java:680)
       at android.view.View.drawableStateChanged(View.java:17003)
       at android.widget.TextView.drawableStateChanged(TextView.java:3984)
       at android.view.View.refreshDrawableState(View.java:17067)
       at android.view.View.setPressed(View.java:7914)
       at android.view.View.setPressed(View.java:7892)
       at android.view.View.access$2900(View.java:708)
       at android.view.View$CheckForTap.run(View.java:21187)
       at android.os.Handler.handleCallback(Handler.java:739)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at android.os.Looper.loop(Looper.java:148)
       at android.app.ActivityThread.main(ActivityThread.java:5451)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

@grabbou我们可以重新打开这个问题吗?

同样的问题在这里android 8.0 api 26

相同于0.54.2。

我将其范围缩小到在FlatList中呈现的<TextInput> 。 当我用<Text>替换它时,问题消失了。

请使用当前可用的最新版本进行复制,我将重新打开它。

在这里@ radko93

Android 8.1 API 27

“依赖关系”:{
“ react”:“ 16.3.1”,
“ react-native”:“ 0.55.1”,
“ react-native-linear-gradient”:“ ^ 2.4.0”,
“ react-native-vector-icons”:“ ^ 4.6.0”,
“反应导航”:“ ^ 1.5.11”
},

尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
createAllFutures
DrawableContainer。 的java:875
getOpacity
DrawableContainer。 的java:1158
getOpacity
DrawableContainer。 的java:433
getOpacity
InsetDrawable。 的java:258
computeOpaqueFlags
视图。 的java:15698
setBackgroundDrawable
视图。 java:20502
setBackground
视图。 java:20395

视图。 Java:5238

TextView。 的java:826

EditText。 的java:88

EditText。 的java:84

EditText。 的java:80

EditText。 的java:76
setThemedContext
ReactTextInputShadowNode。 的java:80
createView
UIImplementation。 的java:282
createView
UIManagerModule。 的java:366
调用
方法.java
调用
JavaMethodWrapper。 的java:372
调用
JavaModuleWrapper。 的java:160

NativeRunnable.java
handleCallback
处理程序。 的java:790
dispatchMessage
处理程序。 的java:99
dispatchMessage
MessageQueueThreadHandler。 的java:29
循环
弯针。 的java:164

MessageQueueThreadImpl。 的java:192

线。 的java:764

同一期

package.json
“依赖关系”:{
“ react”:“ 16.3.1”,
“ react-native”:“ 0.55.2”,
},

build.gradle
编译版本26
buildToolsVersion“ 26.0.2”
minSdkVersion 16

同样的问题。

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
    at android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:888)
    at android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466)
    at android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)
    at android.graphics.drawable.Drawable.setState(Drawable.java:735)
    at android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331)
    at android.graphics.drawable.Drawable.setState(Drawable.java:735)
    at android.view.View.drawableStateChanged(View.java:18038)
    at android.widget.TextView.drawableStateChanged(TextView.java:4108)
    at android.view.View.refreshDrawableState(View.java:18107)
    at android.view.View.setPressed(View.java:8536)
    at android.view.View.setPressed(View.java:8514)
    at android.view.View.onTouchEvent(View.java:11262)
    at android.widget.TextView.onTouchEvent(TextView.java:8489)
    at com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:162)
    at android.view.View.dispatchTouchEvent(View.java:10054)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:432)
    at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1841)
    at android.app.Activity.dispatchTouchEvent(Activity.java:3233)
    at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:394)
    at android.view.View.dispatchPointerEvent(View.java:10286)
    at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4514)
    at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4370)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3883)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3953)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3911)
    at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4053)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3919)
    at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4110)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3883)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3953)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3911)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3919)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3883)
    at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:6359)
    at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:6333)
    at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:6288)
    at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:6469)
    at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:193)
    at android.os.MessageQueue.nativePollOnce(Native Method)
    at android.os.MessageQueue.next(MessageQueue.java:323)
    at android.os.Looper.loop(Looper.java:136)
    at android.app.ActivityThread.main(ActivityThread.java:6295)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:900)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:790)

Android:7.1.1
反应本机:0.48.3

同样的问题。

selection_007

同样的问题,在生产环境中,我的设备是HUAWEI(LLD-AL10)8.0.0,我当前使用的是React Native 0.46.2,谢谢

使用最新版本的react-native(0.55.3)时遇到相同的问题。 如上所述,问题似乎与FlatList中的TextInput有关。 在Android 8.0和8.1中获取错误。 有任何解决方法可以避免此问题?

我可以通过使用react-native init创建一个新的React Native项目并将App.js更改为来重现此错误。

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View
} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    const inputs = Array.apply(null, Array(256)).map((_, i) => i)
    return (
      <View>
        {inputs.map(i => <TextInput key={i} />)}
      </View>
    );
  }
}

我在MacOS 10.13.3上的Android 8.0.0的Galaxy S8上运行此程序。

"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.3"
},

我不知道该错误是否不直接与TextInputs的数量有关,但这是我以相当可靠的方式重现此错误的唯一方法。 使用128个输入时,每次重新启动时都没有出现此错误,但是在重新加载几次后确实出现了。 在256个裸TextInputs上,我认为我无法在没有出现错误的情况下启动应用程序。 我还注意到,在TextInputs之间添加元素似乎减少了出现此错误的可能性,因此它很可能不直接与TextInputs的数量相关。 我在当前应用程序中尝试过此操作,并在启动屏幕中添加了数百个TextInputs确实也触发了此错误,但是我的其他视图中包含类似数量的TextInputs的其他元素包裹着的内容似乎并不总是触发此错误,因为我的应用程序中存在一些错误。

我有同样的问题。 我在装有Android 8.0.0的Huawei P10上运行它。
"react": "^16.2.0", "react-native": "^0.55.0",
屏幕截图

看来问题出在TextInputs中。 这发生在我的华为P10(Android 8.0.0)上。 已经有解决办法了吗?

的Android:7.1.1
“ react-native”:“ 0.53.3”,
image

感谢您发布! 看来您的问题可能是指较旧版本的React Native。 您可以在最新版本v0.55中重现该问题吗?

感谢您的贡献。

我正面临着同样的问题。 它与TextInput组件有关。 即使在屏幕中呈现单个TextInput也会导致此错误。 有什么解决方法吗?

反应本机:0.55
反应:16.3.1

我将ReactEditText构造函数更改为“ super”,但看起来没有发生,
但注释掉“ underlineColorAndroid”
https://github.com/yuanboGeng/react-native/commit/36f7949f9a3e9c1f3b10df43a9f495f9f8712a1f
反应本机:0.53.3
反应:16.2.0

我将模拟器从API级别21升级到API级别26后,这开始发生在我身上

开发时我无缘无故出现此错误。 我清理了/ build文件夹,然后再次运行run-android 。 问题消失了。 真奇怪。 我希望对于某些人来说,干净的构建可以解决此问题。

有同样的问题。 一个小差异-在我的情况下,我将TextInputs嵌套在VirtualizedList(FlatList的父级)内,并且只有在开始滚动该列表时才遇到问题,即使是间歇性获得,也并非一直如此。 与其他情况类似,这是在生产环境中发生的,因此重新启动包装程序不是一种选择。

经过一些挖掘,发现与Android本身的一个旧问题有关: https :
如果这是潜在的问题,则只需升级RN项目中的compileSdk和支持库版本即可解决。 不过,不知道LoE。

更新:如本SO post中所述,试图强迫子项目使用更高版本的构建工具和compileSdk不能为我的项目解决此问题。 不知道我是否错误地应用了这些较高版本,或者我的构建设置没有以这种方式将RN视为子项目,或者实际上不是针对此问题的有效解决方案。

编辑2:看来ReactEditText甚至没有使用EditText的支持库版本(该名称为AppCompatEditText),这说明了为什么升级支持库没有执行任何操作。 我正在研究这个问题-它不仅需要更改继承来进行更新,还需要更多更新,但是_might_是解决此问题的正确方法。

编辑3:这不是解决方案。 我不再相信此问题与链接的AOSP一样。
我可以说,将文本放入哪种ScrollView似乎无关紧要-我能够在VirtualizedList和ScrollView中进行复制,并且该线程中的许多功能都是通过FlatList完成的。

我在生产上也有这个

我也面临这个问题。 @mbret指出,运行cd android ; ./gradlew clean ; cd .. ; react-native run-android对我有用(谢谢!)

太好了,但是真正拥有客户的生产应用程序呢? :|

抱歉@ahanusek ,我并不是说这可以解决问题,而是在开发中对我

但是,即使是开发也不是解决方案。 好的,您清理构建,再次启动应用程序,但是如果“几乎”使用输入,您仍然可能再次遇到此错误。

@ahanusek是的,我同意你的观点,绝不与你争论。 这不是解决方案,但对我而言,目前,它已使我得以继续发展

也看到了v0.55.4:

screen shot 2018-06-12 at 1 05 41 pm

可以肯定地说,我在FlatList或VirtualizedList中没有TextField。 这是在我们的生产环境中发生的。

v0.55.4看到此问题。 是的,我们在列表中使用TextInput

2018-06-13_23-04-20_scrot

发生反应0.55。 以下

使用平面列表中的输入,也会在react native 0.55中发生。

如果人们看不到我的编辑评论,请在此处进行实际发布:

我可以说,将文本放入哪种ScrollView似乎无关紧要-我能够在VirtualizedList和ScrollView中进行复制,并且该线程中的许多功能都是通过FlatList完成的。
或者,换句话说,问题归结为
RN Crashes when loading a very large number of TextInputs. Usually this happens in a ScrollView (or some descended component class of one), but one person got it to happen in a plain View

同一期

我也面临着同样的问题。

奇怪的是,直到昨天晚上我才开始发生这种情况,并且在开发中的一个多月以来,我一直以相同的方式渲染TextInputs。

Android版本9
反应“ 16.3.1”
React-Native“〜0.55.2”

我们的代码中也遇到了类似的问题

崩溃日志:
致命异常:java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures(DrawableContainer.java:875)
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity(DrawableContainer.java:1158)
在android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
在android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
在android.view.View.computeOpaqueFlags(View.java:16791)
在android.view.View.setBackgroundDrawable(View.java:21710)
在android.view.View.setBackground(View.java:21603)
在android.view.View。(View.java:5547)
在android.widget.TextView中。(TextView.java:1135)
在android.widget.EditText中。(EditText.java:107)
在android.widget.EditText中。(EditText.java:103)
在android.widget.EditText中。(EditText.java:99)
在android.widget.EditText中。(EditText.java:95)
在com.facebook.react.views.textinput.ReactEditText中。(ReactEditText.java:92)

这里似乎是什么问题?
尝试了一些调查:
-在纯android应用中有超过1000个edittext工作
-大约200个ReactTextInput失败,如此处所示

  • 对问题的一些分析显示,一个奇怪的多线程方案打破了SparseArray
    -SparseArray不是线程安全的,同时其中包含gc()逻辑
    -SparseArray用于DrawableContainerState,并且可以通过克隆使用现有恒定状态的可绘制期货(这是SparseArray)来创建新的DrawableContainerState
    -以上是多线程空指针异常的解决方法,它的发生如下
    -用于React Edit Text阴影节点创建及其生命周期的本机模块线程执行了一个新的EditText(reactthemedcontext),这反过来导致设置了背景可绘制,并最终调用了SparseArray线程不安全的代码
    -UI线程可同时用于创建其他RTI的显示EditText,从而导致相同的SparseArray线程不安全代码
    -当调用gc()并为同一对象同时进行克隆(此克隆发生在Drawable *类内部)时,会发生Nullpointer异常,从而产生了部分gc-ed对象。 类似于值数组中的一项已被删除并为空,但noOfItems标志尚未更新,因此克隆对象的项少于noOfItems标志中指定的项,并且迭代可能导致已删除索引的空指针异常。

我们如何解决或使其工作?
[1]同样在UI线程上移动新的EditText(context)调用,并使ShadowNode异步进行度量,但要等到UI线程上已创建此EditText对象-基本上重写影子节点setThemedContext和measure函数
缺点:每个RTI都有线程开关

[2]在本机模块上使用布局填充器创建EditText,同时为背景指定null,并通过在UI线程上创建EditText并将其背景可绘制对象缓存在shadowNode级别,仅创建背景可绘制对象一次。 此可绘制对象用于设置使用版面充气器创建的dummyEditTexts的背景,以考虑可绘制边缘线填充来进行度量。 在这种情况下,度量仅需要等待一次即可创建Drawable

我都测试了它们,它们对于1024 ReactTextInput可以正常工作。

注意:基于调查,这似乎并不是最优雅的解决方案,但它只需很小的更改即可工作,并证明了对该问题的分析。

欢迎提出建议和批评!

影子节点代码:

`包装.richtextinput;
导入android.content.Context;
导入android.graphics.drawable.Drawable;
导入android.os.Build;
导入android.text.Layout;
导入android.view.LayoutInflater;
导入android.view.ViewGroup;
导入android.widget.EditText;
导入com.facebook.infer.annotation.Assertions;
导入com.facebook.react.bridge.JSApplicationIllegalArgumentException;
导入com.facebook.react.common.annotations.VisibleForTesting;
导入com.facebook.react.uimanager.Spacing;
导入com.facebook.react.uimanager.ThemedReactContext;
导入com.facebook.react.uimanager.UIViewOperationQueue;
导入com.facebook.react.uimanager.annotations.ReactProp;
导入com.facebook.react.views.text.ReactBaseTextShadowNode;
导入com.facebook.react.views.text.ReactTextUpdate;
导入com.facebook.react.views.textinput.ReactTextInputLocalData;
导入com.facebook.react.views.view.MeasureUtil;
导入com.facebook.yoga.YogaMeasureFunction;
导入com.facebook.yoga.YogaMeasureMode;
导入com.facebook.yoga.YogaMeasureOutput;
导入com.facebook.yoga.YogaNode;
进口.R;

导入javax.annotation.Nullable;
//注意:此类与ReactTextInputShadowNode期望的机制没有太大区别
//设置主题上下文并执行度量
公共类ReactTextInputShadowNode扩展了ReactBaseTextShadowNode实现YogaMeasureFunction
{
@VisibleForTesting
public static final String PROP_TEXT =“文本”;
私有静态Drawable sDummyEditTextBackgroundDrawable = null;

private int mMostRecentEventCount = UNSET;
private <strong i="13">@Nullable</strong> EditText mDummyEditText;
private <strong i="14">@Nullable</strong> ReactTextInputLocalData mLocalData;
// Represents the {<strong i="15">@code</strong> text} property only, not possible nested content.
private <strong i="16">@Nullable</strong> String mText = null;

public ReactRichTextInputShadowNode()
{
    mTextBreakStrategy = (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) ?
            0 : Layout.BREAK_STRATEGY_SIMPLE;
    setMeasureFunction(this);
}

<strong i="17">@Override</strong>
public void setThemedContext(final ThemedReactContext themedContext)
{
    super.setThemedContext(themedContext);

    // Inflating with layout using background as null because new EditText(context) call
    // can cause NullPointer Exception during a race scenario of UI thread performing EditText
    // creation with background at the same time
    //   BACKGROUND:
    // ---------------
    // SparseArray is not threadsafe and at the same time there is logic of gc() inside it
    // SparseArray is used by DrawableContainerState and new DrawableContainerState may get
    // created using the an existing constant state's drawable futures(this is SparseArray) by
    // cloning
    // The above is a recipe for a multi-threaded null pointer exception and it happens as below
    //    - Native module thread working on RTI shadow node creation and its lifecycle does a
    //      new EditText(reactThemedContext) which in turn results in background drawable to be
    //      set and finally invoking the SparseArray thread unsafe code
    //    - UI thread meanwhile could be used to create the display EditText of some other RTI
    //      at the same time leading up to the same SparseArray thread unsafe code
    //    - Null pointer exception happens when the gc() is invoked and simultaneously clone is
    //      being done for the same object giving rise to a partially gc-ed object. Something
    //      like an item from values array was removed and null-ed but the noOfItems flag is yet
    //      to be updated, so cloned object has one item less than specified in noOfItems flag
    //      and iteration can cause null pointer exception for the deleted index.
    //
    //   Solution:
    // ------------
    // Create EditText using layout inflater on Native module while specifying null for
    // background and create only once the background drawable by creating an EditText on UI
    // thread and caching its background drawable at shadowNode level. In this case measure only
    // needs to wait once for the Drawable creation
    //      Shortcomings: Ideally we would like to create the Drawable on the same Native module
    //                    thread but not able to access android.internal stylable ids to
    //                    approach this solution

    LayoutInflater sInflater =
            (LayoutInflater) themedContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    EditText editText  =
            (EditText) sInflater.inflate(R.layout.dummy_edit_text, null, false);

    // creating the EditText theme background on UI thread async to prevent above mentioned race
    // scenario
    if (sDummyEditTextBackgroundDrawable == null) {
        themedContext.runOnUiQueueThread(new Runnable() {
            <strong i="18">@Override</strong>
            public void run() {
                sDummyEditTextBackgroundDrawable = new EditText(themedContext).getBackground();
            }
        });
    }

    mDummyEditText = editText;
}

<strong i="19">@Override</strong>
public long measure(YogaNode node, float width, YogaMeasureMode widthMode, float height,
        YogaMeasureMode heightMode)
{
    // measure() should never be called before setThemedContext()
    EditText editText = Assertions.assertNotNull(mDummyEditText);

    if (mLocalData == null || sDummyEditTextBackgroundDrawable == null)
    {
        // No local data or edit text background drawable, no intrinsic size.
        return YogaMeasureOutput.make(0, 0);
    }

    // {<strong i="20">@code</strong> EditText} has by default a border at the bottom of its view
    // called "underline". To have a native look and feel of the TextEdit
    // we have to preserve it at least by default.
    // The border (underline) has its padding set by the background image
    // provided by the system (which vary a lot among versions and vendors
    // of Android), and it cannot be changed.
    // So, we have to enforce it as a default padding.
    // Sharing the same background drawable is not working in measure and Edit Text features.
    // Hence, cloning.
    editText.setBackground(sDummyEditTextBackgroundDrawable.getConstantState().newDrawable());
    setDefaultPadding(Spacing.START, editText.getPaddingStart());
    setDefaultPadding(Spacing.TOP, editText.getPaddingTop());
    setDefaultPadding(Spacing.END, editText.getPaddingEnd());
    setDefaultPadding(Spacing.BOTTOM, editText.getPaddingBottom());

    // We must measure the EditText without paddings, so we have to reset them.
    editText.setPadding(0, 0, 0, 0);

    // This is needed to fix an android bug since 4.4.3 which will throw an NPE in measure,
    // setting the layoutParams fixes it: https://code.google.com/p/android/issues/detail?id=75877
    editText.setLayoutParams(
          new ViewGroup.LayoutParams(
                  ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

    mLocalData.apply(editText);
    editText.measure(
          MeasureUtil.getMeasureSpec(width, widthMode),
          MeasureUtil.getMeasureSpec(height, heightMode));
    return YogaMeasureOutput.make(editText.getMeasuredWidth(), editText.getMeasuredHeight());
}

<strong i="21">@Override</strong>
public boolean isVirtualAnchor()
{
    return true;
}

<strong i="22">@Override</strong>
public boolean isYogaLeafNode()
{
    return true;
}

<strong i="23">@Override</strong>
public void setLocalData(Object data)
{
    Assertions.assertCondition(data instanceof ReactTextInputLocalData);
    mLocalData = (ReactTextInputLocalData) data;
    // Telling to Yoga that the node should be remeasured on next layout pass.
    dirty();
    // Note: We should NOT mark the node updated (by calling {<strong i="24">@code</strong> markUpdated}) here
    // because the state remains the same.
}
@ReactProp(name = "mostRecentEventCount")
public void setMostRecentEventCount(int mostRecentEventCount)
{
    mMostRecentEventCount = mostRecentEventCount;
}

@ReactProp(name = PROP_TEXT)
public void setText(<strong i="25">@Nullable</strong> String text)
{
    mText = text;
    markUpdated();
}

public <strong i="26">@Nullable</strong> String getText()
{
    return mText;
}

<strong i="27">@Override</strong>
public void setTextBreakStrategy(<strong i="28">@Nullable</strong> String textBreakStrategy)
{
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M)
    {
        return;
    }
    if (textBreakStrategy == null || "simple".equals(textBreakStrategy))
    {
        mTextBreakStrategy = Layout.BREAK_STRATEGY_SIMPLE;
    }
    else if ("highQuality".equals(textBreakStrategy))
    {
        mTextBreakStrategy = Layout.BREAK_STRATEGY_HIGH_QUALITY;
    }
    else if ("balanced".equals(textBreakStrategy))
    {
        mTextBreakStrategy = Layout.BREAK_STRATEGY_BALANCED;
    }
    else
    {
        throw new JSApplicationIllegalArgumentException("Invalid textBreakStrategy: " +
                textBreakStrategy);
    }
}

<strong i="29">@Override</strong>
public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue)
{
    if (mMostRecentEventCount != UNSET)
    {
        ReactTextUpdate reactTextUpdate =
            new ReactTextUpdate(
                    spannedFromShadowNode(this, getText()),
                    mMostRecentEventCount,
                    mContainsImages,
                    getPadding(Spacing.LEFT),
                    getPadding(Spacing.TOP),
                    getPadding(Spacing.RIGHT),
                    getPadding(Spacing.BOTTOM),
                    mTextAlign,
                    mTextBreakStrategy);
        uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), reactTextUpdate);
    }
}

<strong i="30">@Override</strong>
public void setPadding(int spacingType, float padding)
{
    super.setPadding(spacingType, padding);
    markUpdated();
}

}`

虚拟编辑文本布局文件

<?xml version="1.0" encoding="utf-8"?> <EditText xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dummy_edit_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" />

@sayantanbugs这个解决方案有一段代码吗? 谢谢!

更新了我的最后一条注释,以包含ShadowNode代码和用于扩大虚拟edittext的布局

@sayantanbugs-那是一些很棒的🕵️工作! 我们将在我们的项目中尝试并进行报告! 谢谢!

同一期
ReactNative:0.55.4
Android:8.0

@sayantanbugs您能否提供一个差异/补丁?

同样的问题。 通过Crashlytics报告,没有太多其他细节,因此很难进行故障排除。

RN 55.3
Android 8

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:16791)
       at android.view.View.setBackgroundDrawable(View.java:21710)
       at android.view.View.setBackground(View.java:21603)
       at android.view.View.<init>(View.java:5547)
       at android.widget.TextView.<init>(TextView.java:1135)
       at android.widget.EditText.<init>(EditText.java:107)
       at android.widget.EditText.<init>(EditText.java:103)
       at android.widget.EditText.<init>(EditText.java:99)
       at android.widget.EditText.<init>(EditText.java:95)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext(ReactTextInputShadowNode.java:80)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:282)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:366)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:789)
       at android.os.Handler.dispatchMessage(Handler.java:98)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
       at android.os.Looper.loop(Looper.java:164)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
       at java.lang.Thread.run(Thread.java:764)

这是导致我们的应用在生产中崩溃的主要原因。 什么时候/如何发生?

在生产版本中也是如此。
在编辑文本时发生。 这是随机的。

反应:16.3.0
反应本机:0.54.4
同样的问题,如何解决?

^^^更多的人应该尝试使用@sayantanbugs解决方案来解决此问题。 只需在react-native文件夹中找到ReactTextInputShadowNode.java文件,然后换出他提供的代码即可。 您可能会感到惊喜。

自从这样做一周后,我很高兴向您报告错误仅再次发生了一次。 但是这次却有所不同..我能够重新启动应用程序并使它正常运行,而无需通过react-native run-android重新安装应用程序,这真是一件痛苦的事情,因为在我从字面上无法访问到几个屏幕之前,呈现那些TextInputs。 如果错误再次出现,我将继续留意该错误,但到目前为止,我认为该错误在我看来几乎是完美的。 优秀的调试工具,@ sayantanbugs!

@ Friendly-Robot imo这不是解决方案。 充其量是一种解决方法。 这是在生产代码中发生的,在生产代码中,我们不能仅仅修补未经测试的解决方案,您甚至承认无法解决该问题。

如果这确实困扰着开发人员,那么一定可以。 但是我认为激励人们使用它作为解决方案是不明智的。 也许作为公关的基础。

同意@ Friendly-Robot(不过,谢谢@sayantanbugs )。 RN的人在这里吗? 您是否认为该修补程序可以使其进入RN存储库并进行测试?

好的,我终于能够测试@sayantanbugs的方法,但是它似乎对我不起作用(它也基于非主代码)。 但是,作为临时解决方案(相对于框架解决方案),您可以使用修补的drawableStateChanged()方法提供自己的ReactEditText副本:

  <strong i="9">@Override</strong>
  protected void drawableStateChanged() {
    try {
      super.drawableStateChanged();
    } catch (Exception e) {
      Timber.e("Prevented Drawable crash!");
    }
  }

这实际上只是一个补丁,但至少应用程序不会崩溃。 据我所知,文本输入仍然可以响应,并且可以按预期工作。

在重现(现已修复)崩溃时,我可以看到此实际异常连续快速发生了几次。

编辑:
嗯...虽然一切似乎正常,但似乎Drawable状态已永久损坏。 即使使用新的文本输入创建了一个全新的视图之后,触摸任何文本输入也将导致消息再次显示。 幸运的是,它仅在单击输入时显示,而在输入文本时不显示。

我一直在玩我的视图和过渡,今晚出现了20次类似的错误……我什么都没做,只是单击导航以测试视图之间的过渡。 我想这很重要:/

感谢@ Friendly-Robot测试该解决方案!

同意大多数关于我的解决方案是补丁的观点,我在包含该解决方案的原始帖子中确实提到了这一点。 它仍然可以在我的项目中使用的原因是,因为我们在扩展RN RTI的一侧创建了功能更丰富的RTI。 因此,我们可以在自定义RTI的ShadowNode实现中使用我的解决方案。 实际上,在我们的项目中,我们维护了RN的修改版本以修复许多RN错误/用例,因此我们也可以从中进行这些更改。

我确实打算再次探讨其他可能性,因为在那段时间内,我不得不在短短几天内解决当前迫在眉睫的问题。

感谢您的反馈!

@davidmontemayor ,如果在我的修复程序中注意到了可绘制状态的问题,则可以修改shadowNode以始终简单地执行新的EditText(),但是将该调用移到UIthread上,因此无论如何都不会处理可绘制状态。 那肯定会解决它。 我不想这样做,因为当Shadow节点中的实际目的仅仅是获取背景的边框填充,而RN所采用的机制却并非如此,而是有副作用时,切换线程是一种低效的方式。
这使我们认为我们可能自己重写了ShadowNode,以至于此时我们不需要使用EditText对象,而只需使用measure函数即可。

也为我而发生。 我正在使用ScrollView。
我在scrollview中有各种控件(广播,列表,edittext等)。 我想说我最多有10个控件,所以列表不多。
但是很难复制。 这似乎是随机发生的,但我认为当我在屏幕上使用ScrollView(其中带有edittext控件)时,我正在追踪它,以使应用程序从后台进入前台。
虽然不是100%肯定
我想知道它是否与Android支持lib版本有关。

快来FB,修复此错误。
当我们像这样发生随机崩溃时,很难创建具有生产质量的应用程序。

com.facebook.react.views.textinput.ReactEditText
RN 0.54
Android SDK 27
电话8.1

也有此问题,也使用ScrollViews。 @davidmontemayor ,您可以将他的RN newb定向到您通过目录结构编辑的文件吗? 我有一个应用程序投放市场,该崩溃令人不快地影响了崩溃,并希望像您所做的一样捕获错误,直到修复为止。 您是否有使用文件的示例?

相同:

NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference

@Squidski-不幸的是,一旦开始处理EditText初始化失败,“全部捕获”修复将变得非常棘手。 对于背景,此问题表现出两种不同的方式:

  • 实例化ReactEditText( android.widget.EditText.<init>(EditText.java:95)
  • 当ReactEditText与( android.widget.TextView.onTouchEvent(TextView.java:8467) )交互时

关键是要替换ReactTextInputShadowNode创建的视图。 而不是让它执行new EditText(getThemedContext()) ,而是创建从EditText扩展的自己的类。 然后,您可以在drawableStateChanged()捕获由第二条路径引起的异常。

最难的部分是修复初始化错误。 为此,您需要创建一个“ Drawable Wrapper”类,该类可用于包装传递给EditText.setBackground()任何ol'drawable。 然后,该包装器应捕获从委托抛出的异常。

截至2018年7月25日,我的应用程序使用最新版本的React Native +最新的JSC +最新的gradle仍然会随机发生此问题

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.3
      CPU: x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
      Memory: 26.19 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.4.1 => 16.4.1
      react-native: ^0.56.0 => 0.56.0
    npmGlobalPackages:
      react-native-cli: 2.0.1

JSC: org.webkit:android-jsc:r224109
Gradle: 4.8.1

我已经开始在Android 8.0.0和RN 0.55.3中看到此问题。 他们可能对此或PR有任何解决方法吗?

与TextInputs的FlatList有同样的问题也随机😞

  • React-Native:0.55.4

java.lang.NullPointerExceptionMainActivity

java.lang.NullPointerException Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference 
    DrawableContainer.java:875 android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures
    DrawableContainer.java:1158 android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity
    DrawableContainer.java:433 android.graphics.drawable.DrawableContainer.getOpacity
    InsetDrawable.java:258 android.graphics.drawable.InsetDrawable.getOpacity
    View.java:15842 android.view.View.computeOpaqueFlags
    View.java:20658 android.view.View.setBackgroundDrawable
    View.java:20551 android.view.View.setBackground
    View.java:5290 android.view.View.<init>
    TextView.java:832 android.widget.TextView.<init>
    EditText.java:88 android.widget.EditText.<init>
    EditText.java:84 android.widget.EditText.<init>
    EditText.java:80 android.widget.EditText.<init>
    EditText.java:76 android.widget.EditText.<init>
    ReactTextInputShadowNode.java:80 com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext
    UIImplementation.java:282 com.facebook.react.uimanager.UIImplementation.createView
    UIManagerModule.java:366 com.facebook.react.uimanager.UIManagerModule.createView
    Method.java:-2 java.lang.reflect.Method.invoke
    JavaMethodWrapper.java:372 com.facebook.react.bridge.JavaMethodWrapper.invoke
    JavaModuleWrapper.java:160 com.facebook.react.bridge.JavaModuleWrapper.invoke
    NativeRunnable.java:-2 com.facebook.react.bridge.queue.NativeRunnable.run
    Handler.java:790 android.os.Handler.handleCallback
    Handler.java:99 android.os.Handler.dispatchMessage
    MessageQueueThreadHandler.java:29 com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage
    Looper.java:164 android.os.Looper.loop
    MessageQueueThreadImpl.java:192 com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run
    Thread.java:764 java.lang.Thread.run

基于阅读和调试,我决定在本周末尝试以下活动...

  1. 从我的代码中删除所有underlineColorAndroid调用(我正在使用react-native-elements 0.19)

    • 应用应回退到对EditText控件使用透明
    • 也尝试强制透明
  2. 更新我的Android样式以关注。 这将强制所有EditText控件具有透明背景

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="15">@android</strong>:color/transparent</item>
    </style>

</resources>
  1. 测试-测试-测试。 问题很难重现。 尽管今天早晨有一个客户偶然发现了它。

  2. 作为备用,实施@sayantanbugs的修复
    4.1将react-native-elements更新为1.0xx beta

读物
https://issuetracker.google.com/issues/37068452
https://github.com/facebook/react-native/issues/18214

RN 0.54
反应本机元素0.19

发生在RN 0.56.0 Android 8.1.0上
想知道是否有计划将其推进。

尝试替换的所有实例
underlineColorAndroid={"transparent"}

underlineColorAndroid={"#00000000"}

有这个问题。 解决一些棘手的问题。 创建一个处理当前输入的呈现的按钮。 因此,我们有FlatList的按钮,现在只有TextInput可以编辑。 没有参考,我们需要双击以开始编辑输入

handleShowInput(key) {
    const { inputKeyToShow } = this.state;

    if (!inputKeyToShow) {
        this.setState({
            inputKeyToShow: key,
        }, () => this.textInput.focus());
    } else {
        this.setState({
            inputKeyToShow: null,
        });
    }
}
{inputKeyToShow !== key ?
    (
        <TouchableOpacity
            ...
            onPress={() => this.handleShowInput(key)}
        >
            <Text>{value}</Text>
        </TouchableOpacity>
    ) :
    (
        <TextInput
            ...
            ref={ref => (this.textInput = ref)}
            value={value}
            onEndEditing={() => this.handleShowInput(key)}
        />
    )
}

@WilliamAlexander @paulroy您的解决方案有效吗?

到目前为止,我发布的
不过需要更多测试;)

这个问题也导致我们的应用在生产中也崩溃了。 这是一个令人讨厌的错误,因为它确实很难复制。 我们已经为我们的应用找到了一个有希望的修复程序,我想在这里分享我们的发现,以希望为其他人节省一些时间和沮丧。

规格和版本

此错误已导致我们的应用在三星,谷歌和LG Android设备上崩溃。 我们提供了以下Android版本的崩溃报告:

  • 8.0.0
  • 8.1.0
  • 7.1.1

我们的应用正在运行:

  • react-native :0.53.0
  • react :16.2.0

是什么原因导致车祸

就像该线程中的其他人指出的那样,该问题似乎是由于呈现TextInputFlatListScrollView组件的某种组合而触发的。 在我们的例子中,我们有一个屏幕,其中包含一个在FlatList上方呈现的单个TextInput FlatList 。 点击FlatList中的一项时,应用程序导航到包含表单的新屏幕。 此表单的根组件是ScrollView ,其中包含许多TextInput组件(以及一些按钮和其他自定义组件)。 当用户点击这些FlatList项之一时,我们的应用程序崩溃(请注意,它不会每次都发生)。

重现此问题很困难。 实际上,我们一直无法做到这一点。 但是,我们通过观看Appsee会话记录知道崩溃发生在工作流中。

由于无法重现该问题,因此我们不得不依靠Appsee的崩溃日志进行调试。 我已经从下面的崩溃报告中复制了堆栈跟踪(并省略了一些嘈杂的部分)。 它与其他线程在此线程中发布的堆栈跟踪大致相同:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

问题的根源

阅读完该线程并进行了几个小时的研究后,我在ReactTextInputManager.java文件中找到了underlineColorAndroid prop处理程序

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="10">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

注释中链接到的错误报告包含以下堆栈跟踪:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

这与我们在应用程序中遇到的堆栈跟踪相匹配。 我不假装完全理解潜在的问题,但似乎我们的应用程序在生产中崩溃的原因是由于触发了Drawable.mutate()错误。 当我们尝试在TextInput组件上设置underlineColorAndroid道具(并因此调用ReactTextInputManager.setUnderlineColor方法)时,就会发生这种情况。

我们的应用正在渲染具有以下道具的TextInput ,其中一个是underlineColorAndroid="transparent"

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

我们如何解决它

我们需要设置此道具,以便从应用程序中的TextInput组件中删除下划线。 但是根据我们的发现,其道具处理程序似乎正在触发Android错误,导致该应用偶尔崩溃。

幸运的是,还有另一种方法可以删除Android上TextInput组件中的下划线。 您可以在android/app/src/main/res/values/styles.xml文件中添加一行:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="16">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="17">@android</strong>:color/transparent</item>
    </style>
</resources>

请注意,我也看到了以下建议,但这并没有消除我们的下划线:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="22">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="23">@android</strong>:color/transparent</item>
+   </style>
</resources>

这不能解决根本问题。 这只是一种解决方法,涉及避免在TextInput组件上使用underlineColorAndroid prop。

我尚不能肯定地说这确实可行,因为我无法在本地重现该问题。 在接下来的几周内,我们将在我们的应用程序更新中部署此更改。 在那之后,我们将不得不等待一段时间,看看它是否再次发生。 我将尽力报告我们的发现。

祝大家在这个令人沮丧的问题上苦苦挣扎! 我希望这有帮助。

感谢@Hopding显然您的解决方案正在工作!

@跳跃
是的,非常感谢

对于我们来说,此问题以及所有类似的问题(在Android中您会在null引用上找到调用方法)都是由应用程序中的样式不正确引起的。

事实是,大多数react-native组件(即使不是全部)都从appcompat组件扩展而来; 。 因此,必须具有这样的样式:

At somewhere like: /android/app/src/main/res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
</resources>

发生这种情况是因为首先没有渲染appcopmat组件,因此view.getDrawable()返回一个空值,您无法从中调用任何方法,例如: setUnderlineColorsetColorTint (开关也有此问题)。

在我们的例子中,因为我们使用react-native创建本机库,这些本机随后安装在本机应用程序中,所以我们无法控制样式是否出现在最终应用程序中。 周四,至少现在我们意识到了这个问题,并改进了文档;)

希望能帮助到你!

@sospedra您的评论很有道理,但是我检查了我的代码,发现appcompat已经存在于我的样式中。 如果您检查霍丁的解决方法,则他也已经有appcompat

@跳跃
这种样式可以正常工作:

@WilliamAlexander ,我无法收到您的建议以工作。 您能提供适合您的整个样式吗?
我面临的另一个问题是,在应用@Hopding的修复程序时,它影响了我的多行文本输入的布局,因此键盘现在部分覆盖了文本输入。 试图解决这个看似简单的问题时会撕扯我的头发

更新: @Hopding的样式需要以这种方式编写

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
     <item name="android:background"><strong i="11">@android</strong>:color/transparent</item>
     <item name="android:paddingTop">??dp</item>
     <item name="android:paddingBottom">??dp</item>
    </style>

我必须添加填充以修复布局中断。

@ gavin-gmlab。

这里是。
`

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/colorPrimary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/colorAccent</item>

    <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->

    <item name="android:windowIsTranslucent">true</item>
</style>

 <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="android:background"><strong i="9">@android</strong>:color/transparent</item>
</style>

`

删除了underlineColorAndroid =“ transparent”

并更改了style.xml


它为我工作

上面的解决方案都不适合我,但是显然关闭了应用程序和打包程序并重新运行了。

只需清除您的应用数据并再次运行

感谢@WilliamAlexander@Hopding提供的解决方案,但是当我更改背景时,它也会同时删除InputText的填充。 取而代之的是,我使用了backgroundTint,并且在没有任何填充变化的情况下可以正常工作

``

<style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="backgroundTint"><strong i="12">@android</strong>:color/transparent</item>
</style>

``

好吧,除了弹出用户以外,对于Expo用户有什么解决方案吗?

@Twishka不幸的是,由于Expokit也有相同的问题,因此您也必须退出原始反应本机。

我什underlineColorAndroid没有在我的应用程序中的任何地方设置

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:15945)
       at android.view.View.setBackgroundDrawable(View.java:20887)
       at android.view.View.setBackground(View.java:20780)
       at android.view.View.(View.java:5311)
       at android.widget.TextView.(TextView.java:850)
       at android.widget.EditText.(EditText.java:95)
       at android.widget.EditText.(EditText.java:91)
       at android.widget.EditText.(EditText.java:87)
       at android.widget.EditText.(EditText.java:83)
       at com.facebook.react.views.textinput.ReactEditText.(SourceFile:92)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(SourceFile:100)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(SourceFile:60)
       at com.facebook.react.uimanager.ViewManager.createView(SourceFile:42)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(SourceFile:260)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(SourceFile:200)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(SourceFile:1085)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(SourceFile:1056)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(SourceFile:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(SourceFile:134)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(SourceFile:105)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:918)
       at android.view.Choreographer.doCallbacks(Choreographer.java:732)
       at android.view.Choreographer.doFrame(Choreographer.java:661)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:906)
       at android.os.Handler.handleCallback(Handler.java:790)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:187)
       at android.app.ActivityThread.main(ActivityThread.java:7025)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:514)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:888)

谈论颜色时,我将placeHolderTextColor和borderColor设置为#acacac并在发生某些验证问题时将borderColor设置为red 。 除此之外,我什underlineColorAndroid没有设置

任何帮助表示赞赏。

@mddanishansari由于默认设置为rn 0.56

@mddanishansari由于默认设置为rn 0.56

非常感谢。 我没想到回复会这么快。 问题在于,所有其他原始本机EditText背景也是透明的,看起来很奇怪。 我的应用程序的某些屏幕也使用原始本机(Java)。

我只是想知道如何实际解决此问题。 提供的解决方案只是一个简单的技巧。 对?

嗨,大家好。 因此,使用underlineColorAndroid会以某种方式触发此崩溃。
但是现在,此外,underlineColorAndroid默认设置为。
如何避免使用它,并回退到styles.xml。

问候

以防万一这对某人有帮助。 就我而言,我不小心发送了NaN而不是它在'borderBottomLeftRadius'中发生的实际颜色值,我对Android的Iphone没有任何问题。

该线程中的解决方案不适用于我。 即使将所有textinput的underlineColorAndroid设置为非透明(我使用'#f00'进行测试),我仍然遇到此问题。

对我来说,这个问题不会持续发生。 我在ScrollView中有一堆TextInputs,并且必须多次打开和关闭屏幕才能发生

导致错误的原因不是透明度,而是错误的改变
来自本地响应的本地颜色。 几乎每个人
使本地下划线与道具透明。

2019年2月6日,星期三,10:23 PM Adrien Pyke [email protected]写道:

该线程中的解决方案不适用于我。 即使设定
underlineColorAndroid我所有的文本输入都变成不透明的东西
(我使用“#f00”进行了测试),我仍然遇到此问题。

对我来说,这个问题不会持续发生。 我有一堆TextInputs
在ScrollView中,我必须多次打开和关闭屏幕
使其发生

-
您收到此邮件是因为您发表了评论。
直接回复此电子邮件,在GitHub上查看
https://github.com/facebook/react-native/issues/17530#issuecomment-461283498
或使线程静音
https://github.com/notifications/unsubscribe-auth/AOG_BAlfs-GKED4gOuvtKlMD0vwEH-_zks5vK6ozgaJpZM4RaUHf

好的我明白了。

出于好奇,我尝试从此处删除透明的默认值

https://github.com/facebook/react-native/commit/a3a98eb1c7fa0054a236d45421393874ce8ce558

有趣的是,错误仍然发生在我身上

我刚刚在RN 58.3 android上遇到了这个错误。 没有明显的押韵或原因,只是每当我渲染TextInput组件时,都会抛出错误。 即使我渲染的TextInput没有任何道具或改动,它仍然会崩溃。

我尝试重新启动Metro并重置缓存,但这没有用。 实际上,我必须打开Android Studio并重新构建该应用程序,然后它才能开始工作。 这可能是gradle无法正确捆绑依赖项之类的问题吗? 自从我花了4个小时进行良好的开发以来,似乎并没有遇到任何麻烦,但是在经历此问题之前,我没有重新启动任何东西,但是我真的想不出还有什么原因。

我在设备上的RN 58.0中遇到此错误:
Redmi Note 6 Pro-Android 8.1
小米A2 Lite-Android 9
WAS-LX1A-安卓8

有时会通过看哨兵出现,希望能有所帮助。

开发人员会解决此问题吗? 解决方法不适合我们!

我在生产上也有这个

我们在React 0.59上具有与上面两个报告相同的堆栈跟踪

(在堆栈跟踪的第二行上有DrawableContainerState.createAllFutures

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:15718)
       at android.view.View.setBackgroundDrawable(View.java:20528)
       at android.view.View.setBackground(View.java:20421)
       at android.view.View.<init>(View.java:5248)
       at android.widget.TextView.<init>(TextView.java:826)
       at android.widget.EditText.<init>(EditText.java:88)
       at android.widget.EditText.<init>(EditText.java:84)
       at android.widget.EditText.<init>(EditText.java:80)
       at android.widget.EditText.<init>(EditText.java:76)
       at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:89)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:102)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:62)
       at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:47)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:256)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:200)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1109)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1080)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1027)
       at android.view.Choreographer.doCallbacks(Choreographer.java:841)
       at android.view.Choreographer.doFrame(Choreographer.java:769)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1015)
       at android.os.Handler.handleCallback(Handler.java:794)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:176)
       at android.app.ActivityThread.main(ActivityThread.java:6635)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:823)

几个小时前将生产版本从0.58.6升级到0.59.1后,我刚刚获得了与上述相同的stacktrace。 恐怕这将是一个严重的问题。

这个问题有解决方案吗?

@sunnylqm是否可以将underlineColorAndroid为null,因为它是默认设置?

@pedrosimao @tamdao
您必须通过一些补丁工具(例如patch-package)手动删除此行。 而且,如果仍然想使下划线不可见,则需要在xml config中进行设置。
所以关键是要not set any value to underlineColorAndroid anywhere直到某个英雄找到修补此问题的方法。

我今天收到这个错误
之前运行良好,但经过一些构建后,我的设备上发生了错误
对于我来说,此问题的解决方法是在设备上卸载应用程序,然后通过react-native run-android重新安装应用程序
之后,问题就消失了

顺便说一句,我不使用underlineColorAndroid道具,所以无论我为该道具设置或未设置任何值都无法正常工作

当您在滚动视图中使用一些textinputs时,这会随机发生。 始终使用underlineColorAndroid,因为它是默认设置

今天也发生在世博会上。

如果您正在使用Expo,则需要完全关闭Expo服务器,您的应用程序和Expo应用程序。 然后重新打开它们。

否则,错误不会消失。

发生在我世博会上。

由于某种原因,我的应用程序在后台有两个实例。 当我单击名为“概述”的android方形按钮查看内存中的应用程序时,我看到了我的应用程序的这两个实例..当我关闭它们并再次运行该应用程序时,它不再显示此错误。

因此,就像大家之前所说的,关闭所有内容并再次运行应该对其进行修复

我花了3个小时试图找出没有结果的错误,然后在android模拟器上重新安装了我的应用程序,错误消失了。

尝试使用0.59.4查看是否仍然遇到此崩溃。

@sunnylqm在0.59.5上仍然遇到此问题。

Android: 8.0.0
Android Build: R16NW
Manufacturer: samsung
Model: SM-G955F

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
  at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
  at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
  at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
  at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
  at android.view.View.computeOpaqueFlags(View.java:16791)
  at android.view.View.setBackgroundDrawable(View.java:21710)
  at android.view.View.setBackground(View.java:21603)
  at android.view.View.<init>(View.java:5547)
  at android.widget.TextView.<init>(TextView.java:1135)
  at android.widget.EditText.<init>(EditText.java:107)
  at android.widget.EditText.<init>(EditText.java:103)
  at android.widget.EditText.<init>(EditText.java:99)
  at android.widget.EditText.<init>(EditText.java:95)
  at com.facebook.react.views.textinput.c.<init>
  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance
  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance
  at com.facebook.react.uimanager.ViewManager.createView
  at com.facebook.react.uimanager.k.a
  at com.facebook.react.uimanager.aq$e.a
  at com.facebook.react.uimanager.aq$h.c
  at com.facebook.react.uimanager.aq$h.a
  at com.facebook.react.uimanager.e.b
  at com.facebook.react.modules.core.e$b.b
  at com.facebook.react.modules.core.a$a$1.doFrame
  at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
  at android.view.Choreographer.doCallbacks(Choreographer.java:723)
  at android.view.Choreographer.doFrame(Choreographer.java:655)
  at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
  at android.os.Handler.handleCallback(Handler.java:789)
  at android.os.Handler.dispatchMessage(Handler.java:98)
  at android.os.Looper.loop(Looper.java:164)
  at android.app.ActivityThread.main(ActivityThread.java:6938)
  at java.lang.reflect.Method.invoke(Method.java:-2)
  at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

我在呈现多个TextInput的组件中遇到此错误,
当我重新启动构建或应用程序时,它将消失,而当我第二次重新渲染时,它将返回。

Android:9
电话:SAMSUNG Galaxy note 9
型号:SM-N960F / DS
反应本机版本“ 0.58.5”

尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
createAllFutures
DrawableContainer。 的java:875
getOpacity
DrawableContainer。 的java:1158
getOpacity
DrawableContainer。 的java:433
getOpacity
InsetDrawable。 的java:258
computeOpaqueFlags
视图。 的java:18165
setBackgroundDrawable
视图。 java:23335
setBackground
视图。 java:23228

视图。 Java:5952

TextView。 的java:1108

EditText。 的java:106

EditText。 的java:102

EditText。 的java:98

EditText。 的java:94
setThemedContext
ReactTextInputShadowNode。 的java:73
createView
UIImplementation。 的java:288
createView
UIManagerModule。 的java:449
调用
方法.java
调用
JavaMethodWrapper。 的java:372
调用
JavaModuleWrapper。 的java:158

NativeRunnable.java
handleCallback
处理程序。 的java:873
dispatchMessage
处理程序。 的java:99
dispatchMessage
MessageQueueThreadHandler。 的java:29
循环
弯针。 Java:214

MessageQueueThreadImpl。 的java:192

线。 的java:764

我在三星Note 8,Android版本9和React native 0.57.0上也遇到相同的问题

这里同样的问题。 反应本机0.59.0。 使用该应用程序时,该问题只是随机出现。 无法看到任何模式。 发生在开发模式和生产中。

这个问题也导致我们的应用在生产中也崩溃了。 这是一个令人讨厌的错误,因为它确实很难复制。 我们已经为我们的应用找到了一个有希望的修复程序,我想在这里分享我们的发现,以希望为其他人节省一些时间和沮丧。

规格和版本

此错误已导致我们的应用在三星,谷歌和LG Android设备上崩溃。 我们提供了以下Android版本的崩溃报告:

  • 8.0.0
  • 8.1.0
  • 7.1.1

我们的应用正在运行:

  • react-native :0.53.0
  • react :16.2.0

是什么原因导致车祸

就像该线程中的其他人指出的那样,该问题似乎是由于呈现TextInputFlatListScrollView组件的某种组合而触发的。 在我们的例子中,我们有一个屏幕,其中包含一个在FlatList上方呈现的单个TextInput FlatList 。 点击FlatList中的一项时,应用程序导航到包含表单的新屏幕。 此表单的根组件是ScrollView ,其中包含许多TextInput组件(以及一些按钮和其他自定义组件)。 当用户点击这些FlatList项之一时,我们的应用程序崩溃(请注意,它不会每次都发生)。

重现此问题很困难。 实际上,我们一直无法做到这一点。 但是,我们通过观看Appsee会话记录知道崩溃发生在工作流中。

由于无法重现该问题,因此我们不得不依靠Appsee的崩溃日志进行调试。 我已经从下面的崩溃报告中复制了堆栈跟踪(并省略了一些嘈杂的部分)。 它与其他线程在此线程中发布的堆栈跟踪大致相同:

0     java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1     at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2     at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3     at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4     at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5     at android.view.View.computeOpaqueFlags(View.java:16900)
6     at android.view.View.setBackgroundDrawable(View.java:21824)
7     at android.view.View.setBackground(View.java:21717)
8     at android.view.View.<init>(View.java:5577)
9     at android.widget.TextView.<init>(TextView.java:1144)
...
13    at android.widget.EditText.<init>(EditText.java:96)
14    at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15    at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16    at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

问题的根源

阅读完该线程并进行了几个小时的研究后,我在ReactTextInputManager.java文件中找到了underlineColorAndroid prop处理程序

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="42">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

注释中链接到的错误报告包含以下堆栈跟踪:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

这与我们在应用程序中遇到的堆栈跟踪相匹配。 我不假装不完全理解根本的问题,但似乎我们的应用程序在生产中崩溃的原因是由于触发了Drawable.mutate()错误。 当我们尝试在TextInput组件上设置underlineColorAndroid道具(并因此调用ReactTextInputManager.setUnderlineColor方法)时,就会发生这种情况。

我们的应用正在渲染具有以下道具的TextInput ,其中一个是underlineColorAndroid="transparent"

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

我们如何解决它

我们需要设置此道具,以便从应用程序中的TextInput组件中删除下划线。 但是根据我们的发现,其道具处理程序似乎正在触发Android错误,导致该应用偶尔崩溃。

幸运的是,还有另一种方法可以删除Android上TextInput组件中的下划线。 您可以在android/app/src/main/res/values/styles.xml文件中添加一行:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="65">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="66">@android</strong>:color/transparent</item>
    </style>
</resources>

请注意,我也看到了以下建议,但这并没有消除我们的下划线:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="71">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="72">@android</strong>:color/transparent</item>
+   </style>
</resources>

这不能解决根本问题。 这只是一种解决方法,涉及避免在TextInput组件上使用underlineColorAndroid道具。

我尚不能肯定地说这确实可行,因为我无法在本地重现该问题。 在接下来的几周内,我们将在我们的应用程序更新中部署此更改。 在那之后,我们将不得不等待一段时间,看看它是否再次发生。 我将尽力报告我们的发现。

祝大家在这个令人沮丧的问题上苦苦挣扎! 我希望这有帮助。

我知道如何重现这种情况。 按照您所说的在表单中单击返回,然后在单位列表中单击项目以输入表单。 重复大约十次,再快一点,就会发生此错误。 您可以根据我所说的重现该错误。

@跳跃
我知道如何重现这种情况。 按照您所说的在表单中单击返回,然后在单位列表中单击项目以输入表单。 重复大约十次,再快一点,就会发生此错误。 您可以根据我所说的重现该错误。

@跳跃
我删除了underlineColorAndroid,但将对其进行重现。

@ react-native-bot这个问题非常重要

我正在使用RN 59.5,也有此问题。

尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
createAllFutures
DrawableContainer。 的java:875
getOpacity
DrawableContainer。 的java:1158
getOpacity
DrawableContainer。 的java:433
getOpacity
InsetDrawable。 的java:258
computeOpaqueFlags
视图。 Java:16594
setBackgroundDrawable
视图。 java:21577
setBackground
视图。 java:21470

视图。 Java:5498

TextView。 的java:875

EditText。 的java:88

EditText。 的java:84

EditText。 的java:80

EditText。 的java:76
setThemedContext
ReactTextInputShadowNode。 的java:76
createView
UIImplementation。 的java:294
createView
UIManagerModule。 Java:462
调用
方法.java
调用
JavaMethodWrapper。 的java:372
调用
JavaModuleWrapper。 的java:158

NativeRunnable.java
handleCallback
处理程序。 的java:873
dispatchMessage
处理程序。 的java:99
dispatchMessage
MessageQueueThreadHandler。 的java:29
循环
弯针。 的java:193

MessageQueueThreadImpl。 的java:232

线。 的java:764

有人解决了吗? 我在RN 52中遇到此问题,我升级到56,但仍然是错误。 我尝试了重现它的步骤,但是不能。 有些设备仍会随机触发。

这个问题有运气吗?

我得到这个问题RN 0.59.5

这个问题也导致我们的应用在生产中也崩溃了。 这是一个令人讨厌的错误,因为它确实很难复制。 我们已经为我们的应用找到了一个有希望的修复程序,我想在这里分享我们的发现,以希望为其他人节省一些时间和沮丧。

规格和版本

此错误已导致我们的应用在三星,谷歌和LG Android设备上崩溃。 我们提供了以下Android版本的崩溃报告:

  • 8.0.0
  • 8.1.0
  • 7.1.1

我们的应用正在运行:

  • react-native :0.53.0
  • react :16.2.0

是什么原因导致车祸

就像该线程中的其他人指出的那样,该问题似乎是由于呈现TextInputFlatListScrollView组件的某种组合而触发的。 在我们的例子中,我们有一个屏幕,其中包含一个在FlatList上方呈现的单个TextInput FlatList 。 点击FlatList中的一项时,应用程序导航到包含表单的新屏幕。 此表单的根组件是ScrollView ,其中包含许多TextInput组件(以及一些按钮和其他自定义组件)。 当用户点击这些FlatList项之一时,我们的应用程序崩溃(请注意,它不会每次都发生)。
重现此问题很困难。 实际上,我们一直无法做到这一点。 但是,我们通过观看Appsee会话记录知道崩溃发生在工作流中。
由于无法重现该问题,因此我们不得不依靠Appsee的崩溃日志进行调试。 我已经从下面的崩溃报告中复制了堆栈跟踪(并省略了一些嘈杂的部分)。 它与其他线程在此线程中发布的堆栈跟踪大致相同:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

问题的根源

阅读完该线程并进行了几个小时的研究后,我在ReactTextInputManager.java文件中找到了underlineColorAndroid prop处理程序

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="43">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

注释中链接到的错误报告包含以下堆栈跟踪:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

这与我们在应用程序中遇到的堆栈跟踪相匹配。 我不假装不完全理解根本的问题,但似乎我们的应用程序在生产中崩溃的原因是由于触发了Drawable.mutate()错误。 当我们尝试在TextInput组件上设置underlineColorAndroid道具(并因此调用ReactTextInputManager.setUnderlineColor方法)时,就会发生这种情况。
我们的应用正在渲染具有以下道具的TextInput ,其中一个是underlineColorAndroid="transparent"

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

我们如何解决它

我们需要设置此道具,以便从应用程序中的TextInput组件中删除下划线。 但是根据我们的发现,其道具处理程序似乎正在触发Android错误,导致该应用偶尔崩溃。
幸运的是,还有另一种方法可以删除Android上TextInput组件中的下划线。 您可以在android/app/src/main/res/values/styles.xml文件中添加一行:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="66">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="67">@android</strong>:color/transparent</item>
    </style>
</resources>

请注意,我也看到了以下建议,但这并没有消除我们的下划线:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="72">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="73">@android</strong>:color/transparent</item>
+   </style>
</resources>

这不能解决根本问题。 这只是一种解决方法,涉及避免在TextInput组件上使用underlineColorAndroid道具。
我尚不能肯定地说这确实可行,因为我无法在本地重现该问题。 在接下来的几周内,我们将在我们的应用程序更新中部署此更改。 在那之后,我们将不得不等待一段时间,看看它是否再次发生。 我将尽力报告我们的发现。
祝大家在这个令人沮丧的问题上苦苦挣扎! 我希望这有帮助。

我知道如何重现这种情况。 按照您所说的在表单中单击返回,然后在单位列表中单击项目以输入表单。 重复大约十次,再快一点,就会发生此错误。 您可以根据我所说的重现该错误。

好像这样可以解决它。

对于那些想知道如何复制的人:我们通过在<ScrollView ...>添加100 <TextInput ...> s来复制它。 到那时,我们能够重现错误,估计成功率为75%-90%。 足够尝试解决方案。 50个字段还不够。

@Hopding解决方法为我们工作。 提议的替代“色彩”解决方案(由其他人使用)不起作用。 解决方法的不幸副作用是从文本输入中删除了填充。

同样在这里。

致命异常:java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures(DrawableContainer.java:875)
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity(DrawableContainer.java:1158)
在android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
在android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
在android.view.View.computeOpaqueFlags(View.java:18188)
在android.view.View.setBackgroundDrawable(View.java:23358)
在android.view.View.setBackground(View.java:23251)
在android.view.View。(View.java:5948)
在android.widget.TextView中。(TextView.java:1118)
在android.widget.EditText中。(EditText.java:106)
在android.widget.EditText中。(EditText.java:102)
在android.widget.EditText中。(EditText.java:98)
在android.widget.EditText中。(EditText.java:94)
在com.facebook.react.views.textinput.ReactEditText中。(ReactEditText.java:89)
在com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:105)
在com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:65)
在com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:47)
在com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:256)
在com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute(UIViewOperationQueue.java:200)
在com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1109)
在com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1080)
在com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
在com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
在com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame(ChoreographerCompat.java:84)
在android.view.Choreographer $ CallbackRecord.run(Choreographer.java:947)
在android.view.Choreographer.doCallbacks(Choreographer.java:761)
在android.view.Choreographer.doFrame(Choreographer.java:693)
在android.view.Choreographer $ FrameDisplayEventReceiver.run(Choreographer.java:935)
在android.os.Handler.handleCallback(Handler.java:873)
在android.os.Handler.dispatchMessage(Handler.java:99)
在android.os.Looper.loop(Looper.java:214)
在android.app.ActivityThread.main(ActivityThread.java:7045)
在java.lang.reflect.Method.invoke(Method.java)
在com.android.internal.os.RuntimeInit $ MethodAndArgsCaller.run(RuntimeInit.java:493)
在com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965)

image

任何解决方法?

这是重现错误的代码RN 0.59.8

> import React, { Component } from 'react';
> import { StyleSheet, Text, View, TextInput, FlatList, TouchableOpacity } from 'react-native';
> 
> export default class App extends Component {
>   state = { Valor: [] }
>   componentDidMount() {
>     for (i = 0; i < 90000; i++) {
>       var te = { ID: i }
>       this.state.Valor.push(te)
>     }
>   }
> 
>   keyExtractor = (item, index) => item.ID.toString();
>   renderList = () => {
>     return (
>       <FlatList
>         keyExtractor={this.keyExtractor}
>         data={this.state.Valor}
>         renderItem={({ item }) => (
>           <TouchableOpacity
>             activeOpacity={0.5}
>             onPress={() => alert("hola")} >
>             <View style={{ flex: 1 }}>
>               <Text>Muestra</Text>
>               <TextInput
>                 underlineColorAndroid={"transparent"}
>                 placeholder={"Ingrese"}
>                 keyboardType="phone-pad"
>               />
>             </View>
>           </TouchableOpacity>
>         )}
>       >
>       </FlatList>
>     );
>   };
> 
>   render() {
>     return (
>       <View style={styles.container}>
>         {this.renderList()}
>       </View>
>     );
>   }
> }
> 
> const styles = StyleSheet.create({
>   container: {
>     flex: 1,
>     justifyContent: 'flex-start',
>     alignItems: 'flex-start',
>     backgroundColor: '#F5FCFF',
>   },
>   welcome: {
>     fontSize: 20,
>     textAlign: 'center',
>     margin: 10,
>   },
>   instructions: {
>     textAlign: 'center',
>     color: '#333333',
>     marginBottom: 5,
>   }
> });
> 

视频: https

解决方案

本期于2018年1月11日开放,现在是2019年5月,为什么官方团队中的任何人都没有解决这个问题?
仅供参考,解决方法无效。

同样在这里0.59.6

致命异常:java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures(DrawableContainer.java:875)
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity(DrawableContainer.java:1158)
在android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
在android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
在android.view.View.computeOpaqueFlags(View.java:18188)
在android.view.View.setBackgroundDrawable(View.java:23358)
在android.view.View.setBackground(View.java:23251)
在android.view.View。(View.java:5948)
在android.widget.TextView(TextView.java:1118)
在android.widget.EditText(EditText.java:106)
在android.widget.EditText(EditText.java:102)
在android.widget.EditText(EditText.java:98)
在android.widget.EditText(EditText.java:94)
在com.facebook.react.views.textinput.ReactEditText(ReactEditText.java:89)
在com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:105)
在com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:65)
在com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:47)
在com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:256)
在com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute(UIViewOperationQueue.java:200)
在com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1109)
在com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1080)
在com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
在com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
在com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame(ChoreographerCompat.java:84)
在android.view.Choreographer $ CallbackRecord.run(Choreographer.java:947)
在android.view.Choreographer.doCallbacks(Choreographer.java:761)
在android.view.Choreographer.doFrame(Choreographer.java:693)
在android.view.Choreographer $ FrameDisplayEventReceiver.run(Choreographer.java:935)
在android.os.Handler.handleCallback(Handler.java:873)
在android.os.Handler.dispatchMessage(Handler.java:99)
在android.os.Looper.loop(Looper.java:214)
在android.app.ActivityThread.main(ActivityThread.java:7045)
在java.lang.reflect.Method.invoke(Method.java)
在com.android.internal.os.RuntimeInit $ MethodAndArgsCaller.run(RuntimeInit.java:493)
在com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965)

bug_react

@knspatel我们的解决方法是在屏幕上覆盖一个模式,该模式将文本输入框放置在原始文本上方,并带有轻微的背景不透明性,以解决过渡效果。 如果y坐标不可见或无法访问,则文本输入框仅位于键盘上方。

让我回顾一下:
关键是不要在任何地方为underlineColorAndroid设置任何值。 但是由于默认情况下设置了0.57 underlineColorAndroid ,因此您必须通过某些补丁工具(例如patch-package)手动删除此行
而且,如果仍然想使下划线不可见,则需要在xml config中进行设置。


到目前为止,我发现了一些信息:
一个中文博客(如果您看不懂,可以尝试用Google翻译)提到了与此问题非常相似的问题。 它说一些没有getConstantState实现的自定义可绘制类在某些情况下可能导致崩溃。

我发现有时会重新创建textinput(ReactEditText)(更多的textinputs更多的可能性,还可以回收吗?),它将再次setBackground ,然后转到https://github.com/aosp-mirror/ platform_frameworks_base / blob / master / graphics / java / android / graphics / drawable / DrawableContainer.java#L922 ,其中ConstantState为空。

我发现的唯一自定义可绘制类是ReactViewBackgroundDrawable ,它没有实现getConstantState ,默认情况下将返回null。
我试图用一些空的类来覆盖它,这可能会有所作为(当其他崩溃出现时,崩溃消失了)

希望这可以帮助某人进一步挖掘。

我发现手动测试非常流行,所以我编写了一个组件来自动测试人们在上面报告的某些场景。 您将在下面找到组件。 您只需将其渲染到某个地方即可完成工作。

这样做,我发现您只需要按照@Hopding的建议将以下内容添加到styles.xml中的AppTheme中
<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

不需要任何其他操作,并且不需要__ underlineColorAndroid来设置

此修复程序的主要缺点是,您必须重新设置TextInputs的样式,以免造成填充的损失,并且还失去实际的下划线行为,这对我们来说是一个好处,因为我们始终将其设置为“透明”与iOS保持一致。 如果需要,可以制作一个监视onFocusonBlur的包装器组件,并制作自己的下划线。

我的React Native版本是0.57.3

这是我使用测试组件发现的其他一些内容:

  1. 我的低规格android平板电脑设备根本无法引起崩溃。 但是,在运行Android 7的Samsung S6 Edge手机上,重现非常容易。我猜是在一种竞争条件下,需要更快的设备来激发它。
  2. 滚动文本输入没有什么区别,而且即使不使用ScrollView,也可以轻松重现该问题。
  3. 无需输入文本。 仅仅改变焦点就足以导致崩溃。
  4. 设置下划线的颜色没有区别,即使undefined也会导致崩溃,但是您可能希望这样做,因为RN现在默认将其设置为“透明”
  5. 一次显示大量的TextInputs可以使崩溃发生的速度更快(100而不是屏幕上的10)。
  6. 我无法使用displayForMs: 0重现崩溃,这表明它仅在最近才创建TextInputs时发生。

如果您不想在测试期间徘徊,可以捕获adb logcat的输出,并查找由组件和崩溃报告生成的控制台消息。

如果您想使用它,这是我的测试组件。 测试参数设置为通常在30秒内导致崩溃。

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

import * as React from "react";
import { View, ScrollView, TextInput, Text, StyleSheet } from "react-native";

// These are the test parameters
const params = {
  underlineColors: ["red", undefined, "transparent", "rgba(0, 0, 0, 0)"],  // The colors to test
  numberOfInputs: 100, // How many TextInput to render at a time
  focusIntervalMs: 200, // How often to change focus between them
  displayForMs: 3000, // How long to display them (set to 0 for indefinite)
  delayDisplayForMs: 10, // How long to delay between displays
  withScrollView: false // Whether to use a ScrollView
};

const testText = index =>
  `Testing underlineColor = ${params.underlineColors[index] || "undefined"}`;

class AndroidTextInputTest extends React.Component{
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log(`Testing with params = `, JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
      if (this.focussedInputIndex >= this.textInputRefs.length) {
        this.focussedInputIndex = 0;
      }
      const textInputRef = this.textInputRefs[this.focussedInputIndex];
      const textInput = this.refs[textInputRef];
      if (textInput) {
        this.focussedInputIndex++;
        this.refs[textInputRef].focus();
      }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
      console.log(testText(this.state.underlineColorIndex));
      this.setState({ showInputs: true });
      if (params.displayForMs) {
        setTimeout(this._unshowInputs, params.displayForMs);
      }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
      let next = this.state.underlineColorIndex + 1;
      if (next === params.underlineColors.length) {
        next = 0;
      }
      this.setState({
        underlineColorIndex: next,
        showInputs: false,
        startKey: this.state.startKey + params.numberOfInputs
      });
      setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

    if (this.state.showInputs) {
      for (let i = 0; i < params.numberOfInputs; i++) {
        const key = this.state.startKey + i + "";
        refs.push(key);
        textInputs.push(
          <TextInput
            ref={key}
            key={key}
            placeholder={key}
            underlineColorAndroid={underlineColor}
            style={styles.textInput}
          />
        );
      }
      if (!this.textInputRefs) {
        this.textInputRefs = refs;
      }
    }

    return (
      <View style={styles.mainView}>
        <Text>{testText(underlineColorIndex)}</Text>
        {params.withScrollView ? (
          <React.Fragment>
            <Text>With ScrollView</Text>
            <ScrollView>{textInputs}</ScrollView>
          </React.Fragment>
        ) : (
          <React.Fragment>{textInputs}</React.Fragment>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center"
  },
  textInput: {
    backgroundColor: "white",
    margin: 5,
    width: 300
  }
});

export default AndroidTextInputTest;

对于所有寻求解决方案的人,我也可以确认该设置@android :颜色/透明在styles.xml中解决了该问题。

仅供参考:我们使用的是React-Native Paper及其TextInput组件,我们能够安全地设置<item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item>而不对RN-Paper TextInput产生任何影响,并且从那以后再也没有经历过崩溃。

0.59.9上看到生产。

速溶药:

三星Galaxy S7 Edge
Android 8.0

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures + 875(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity + 1158(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity + 433(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity + 258(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags + 16809(View.java:16809)
       at android.view.View.setBackgroundDrawable + 21728(View.java:21728)
       at android.view.View.setBackground + 21621(View.java:21621)
       at android.view.View.<init> + 5553(View.java:5553)
       at android.widget.TextView.<init> + 1135(TextView.java:1135)
       at android.widget.EditText.<init> + 107(EditText.java:107)
       at android.widget.EditText.<init> + 103(EditText.java:103)
       at android.widget.EditText.<init> + 99(EditText.java:99)
       at android.widget.EditText.<init> + 95(EditText.java:95)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext + 76(ReactTextInputShadowNode.java:76)
       at com.facebook.react.uimanager.UIImplementation.createView + 294(UIImplementation.java:294)
       at com.facebook.react.uimanager.UIManagerModule.createView + 462(UIManagerModule.java:462)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke + 372(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke + 158(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback + 789(Handler.java:789)
       at android.os.Handler.dispatchMessage + 98(Handler.java:98)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage + 29(MessageQueueThreadHandler.java:29)
       at android.os.Looper.loop + 164(Looper.java:164)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run + 232(MessageQueueThreadImpl.java:232)
       at java.lang.Thread.run + 764(Thread.java:764)

改变这个:

state = {
  data: []
}

对此:

constructor(props) {
  super(props);
  this.state = {
    data: []
  };
}

为我解决了这个问题。 不知道为什么,因为将state设置为类变量应该可以吗? 任何人?

@wbodron不,没有关系。 崩溃是随机的,因此您可能认为它已经消失了,但实际上却没有。 我在上面已经解释了关键点https://github.com/facebook/react-native/issues/17530#issuecomment -500865260

cc @cpojer @shergin @sahrens

从android删除build文件夹。
Your_Project> android> app>构建

删除后,运行react-native run-android

应该工作正常。
为我工作:D

我已经尝试过并删除underlineColorAndroid,但是仍然存在问题。 有人有其他解决方法吗?

这个问题也导致我们的应用在生产中也崩溃了。 这是一个令人讨厌的错误,因为它确实很难复制。 我们已经为我们的应用找到了一个有希望的修复程序,我想在这里分享我们的发现,以希望为其他人节省一些时间和沮丧。

规格和版本

此错误已导致我们的应用在三星,谷歌和LG Android设备上崩溃。 我们提供了以下Android版本的崩溃报告:

  • 8.0.0
  • 8.1.0
  • 7.1.1

我们的应用正在运行:

  • react-native :0.53.0
  • react :16.2.0

是什么原因导致车祸

就像该线程中的其他人指出的那样,该问题似乎是由于呈现TextInputFlatListScrollView组件的某种组合而触发的。 在我们的例子中,我们有一个屏幕,其中包含一个在FlatList上方呈现的单个TextInput FlatList 。 点击FlatList中的一项时,应用程序导航到包含表单的新屏幕。 此表单的根组件是ScrollView ,其中包含许多TextInput组件(以及一些按钮和其他自定义组件)。 当用户点击这些FlatList项之一时,我们的应用程序崩溃(请注意,它不会每次都发生)。
重现此问题很困难。 实际上,我们一直无法做到这一点。 但是,我们通过观看Appsee会话记录知道崩溃发生在工作流中。
由于无法重现该问题,因此我们不得不依靠Appsee的崩溃日志进行调试。 我已经从下面的崩溃报告中复制了堆栈跟踪(并省略了一些嘈杂的部分)。 它与其他线程在此线程中发布的堆栈跟踪大致相同:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

问题的根源

阅读完该线程并进行了几个小时的研究后,我在ReactTextInputManager.java文件中找到了underlineColorAndroid prop处理程序

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="44">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

注释中链接到的错误报告包含以下堆栈跟踪:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

这与我们在应用程序中遇到的堆栈跟踪相匹配。 我不假装不完全理解根本的问题,但似乎我们的应用程序在生产中崩溃的原因是由于触发了Drawable.mutate()错误。 当我们尝试在TextInput组件上设置underlineColorAndroid道具(并因此调用ReactTextInputManager.setUnderlineColor方法)时,就会发生这种情况。
我们的应用正在渲染具有以下道具的TextInput ,其中一个是underlineColorAndroid="transparent"

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

我们如何解决它

我们需要设置此道具,以便从应用程序中的TextInput组件中删除下划线。 但是根据我们的发现,其道具处理程序似乎正在触发Android错误,导致该应用偶尔崩溃。
幸运的是,还有另一种方法可以删除Android上TextInput组件中的下划线。 您可以在android/app/src/main/res/values/styles.xml文件中添加一行:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="67">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="68">@android</strong>:color/transparent</item>
    </style>
</resources>

请注意,我也看到了以下建议,但这并没有消除我们的下划线:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="73">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="74">@android</strong>:color/transparent</item>
+   </style>
</resources>

这不能解决根本问题。 这只是一种解决方法,涉及避免在TextInput组件上使用underlineColorAndroid道具。
我尚不能肯定地说这确实可行,因为我无法在本地重现该问题。 在接下来的几周内,我们将在我们的应用程序更新中部署此更改。 在那之后,我们将不得不等待一段时间,看看它是否再次发生。 我将尽力报告我们的发现。
祝大家在这个令人沮丧的问题上苦苦挣扎! 我希望这有帮助。

我知道如何重现这种情况。 按照您所说的在表单中单击返回,然后在单位列表中单击项目以输入表单。 重复大约十次,再快一点,就会发生此错误。 您可以根据我所说的重现该错误。

我能做什么? 我也面临这个问题!

同样在这里。 面对生产

@ jake41我尝试重新启动它并且它起作用了,您是否尝试重新启动它? 更新expo cli后,我遇到了这个问题,我认为是版本问题。

@agrass我将尝试您的方法。 看起来很有希望。
但是,由于这种原因,我的应用程序崩溃很少见。 这个问题是否会使应用每次崩溃? 还是有时候?
我们应用的DAU约为8k,大约每天发生一次。 因此,它可以忽略不计,但是我希望能够解决崩溃问题。

有没有人找到合适的工作解决方案? 它很少发生,并且仅在具有文本字段的组件中发生。

React Native 0.60仍然存在问题

React Native:0.59.8
Android:8.1.0
设备:Redmi 5 Plus

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures + 875(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity + 1158(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity + 433(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity + 258(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags + 15726(View.java:15726)
       at android.view.View.setBackgroundDrawable + 20536(View.java:20536)
       at android.view.View.setBackground + 20429(View.java:20429)
       at android.view.View.(View.java:5256)
       at android.widget.TextView.(TextView.java:826)
       at android.widget.EditText.(EditText.java:88)
       at android.widget.EditText.(EditText.java:84)
       at android.widget.EditText.(EditText.java:80)
       at android.widget.EditText.(EditText.java:76)
       at com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:89)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance + 105(ReactTextInputManager.java:105)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance + 65(ReactTextInputManager.java:65)
       at com.facebook.react.uimanager.ViewManager.createView + 47(ViewManager.java:47)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView + 256(NativeViewHierarchyManager.java:256)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute + 200(UIViewOperationQueue.java:200)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations + 1109(UIViewOperationQueue.java:1109)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded + 1080(UIViewOperationQueue.java:1080)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame + 29(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame + 166(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame + 84(ChoreographerCompat.java:84)
       at android.view.Choreographer$CallbackRecord.run + 1027(Choreographer.java:1027)
       at android.view.Choreographer.doCallbacks + 841(Choreographer.java:841)
       at android.view.Choreographer.doFrame + 769(Choreographer.java:769)
       at android.view.Choreographer$FrameDisplayEventReceiver.run + 1015(Choreographer.java:1015)
       at android.os.Handler.handleCallback + 794(Handler.java:794)
       at android.os.Handler.dispatchMessage + 99(Handler.java:99)
       at android.os.Looper.loop + 176(Looper.java:176)
       at android.app.ActivityThread.main + 6651(ActivityThread.java:6651)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run + 547(RuntimeInit.java:547)
       at com.android.internal.os.ZygoteInit.main + 824(ZygoteInit.java:824)

在这里有同样的问题
RN:0.59.9
设备:像素2
Android:9.0

如果是表单屏幕,您可能正在等待定义输入中的值,它对我有用。

我找到了解决方案。 不确定这是否是长期的解决方案,但这将使您能够工作直到找到永久解决方案。
只需清除现金即可:npm start---reset-cache
并重新启动项目。
它为我工作。
仅供参考,我还没有退出我的项目。
我的依赖:

“ devDependencies”:{
“ @ types / react”:“ ^ 16.8.23”,
“ @ types / react-native”:“ ^ 0.57.65”,
“ babel-preset-expo”:“ ^ 6.0.0”,
“ typescript”:“ ^ 3.4.5”
},

ExpoKit(SDK 34)用户在这里称重。 我在所有版本的ExpoKit(包括最新版本)上都遇到了此问题。 我尝试过应用这些修复程序,并进行了一些修改,到目前为止,效果很好。

样式更改最终与@Hopding有点不同-基本上相反的情况对我ExponentEditText样式:

<style name="ExponentEditText" parent="<strong i="9">@android</strong>:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">#000000</item>
    <item name="android:background"><strong i="10">@android</strong>:color/transparent</item>
  </style>

因为对android:editTextBackground的更改不起作用(可能与ExponentEditText样式已经存在有关)。 有趣的是,我不必修补默认道具,将underlineColorAndroidtransparent 。 我确实有填充问题; 但是我觉得它实际上是一种改进,因为当它为空时,我不再需要处理TextInput的固有填充,而我试图将其他组件放置在靠近它的位置。

以前,我可以通过添加到应用程序中的诊断按钮可靠地触发错误,该按钮将500个TextInputs添加到SectionList。 我会说,根据我的经验,第一次尝试会触发60%的时间,第二次触发90%的时间,第三次触发100%的时间。 进行更改后,至少尝试了10次而没有错误。

在这里有同样的问题
RN:0.55.4
设备:MI 8 Lite
安卓:8.1.0

java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures(DrawableContainer.java:875)
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity(DrawableContainer.java:1158)
在android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
在android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
在android.view.View.computeOpaqueFlags(View.java:15748)
在android.view.View.setBackgroundDrawable(View.java:20558)
在android.view.View.setBackground(View.java:20451)
在android.view.View。(View.java:5255)
在android.widget.TextView中。(TextView.java:826)
在android.widget.EditText中。(EditText.java:88)
在android.widget.EditText中。(EditText.java:84)
在android.widget.EditText中。(EditText.java:80)
在android.widget.EditText中。(EditText.java:76)
在com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext(ReactTextInputShadowNode.java:80)
在com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:282)
在com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:366)
在java.lang.reflect.Method.invoke(Method.java)
在com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
在com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
在com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
在android.os.Handler.handleCallback(Handler.java:790)
在android.os.Handler.dispatchMessage(Handler.java:99)
在com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
在android.os.Looper.loop(Looper.java:164)
在com.facebook.react.bridge.queue.MessageQueueThreadImpl $ 3.run(MessageQueueThreadImpl.java:192)
在java.lang.Thread.run(Thread.java:764)

致命异常:java.lang.NullPointerException
尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'

vivo 1804
Android版本:9

为我而生。 不过,React Native版本0.60.4在Android 9上运行。

为我而生。 不过,React Native版本0.60.4在Android 9上运行。

我也一样

同样,Android 9上的React Native 0.60.4

我将React Native与Expo一起使用,今天早上遇到了这个问题。
我首先尝试将这一行放入我的styles.xml AppTheme中

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:editTextBackground"><strong i="9">@android</strong>:color/transparent</item>
</style>

它没有用,所以我搜索了另一个地方,最后把它放在那里:

<style name="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"
       parent="@style/Theme.ReactNative.AppCompat.Light">
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
  <item name="android:editTextBackground"><strong i="16">@android</strong>:color/transparent</item>
</style>

现在似乎工作正常

这次崩溃是如此随机。 相同的堆栈跟踪,v0.60.4。 同样的错误。 有解决方案吗? 有人建议删除构建文件夹,但我看不到与空指针有什么关系? 解决方案似乎始终是重建/重新运行

@armagedan @jacobbeasley等问题_is_断断续续,因此您不妨尝试上面我的评论中提供的插入组件来重现它。 该评论还提供了对该问题的分析以及对我和其他许多人有用的解决方案。

@wxjer我尝试清除有关设置的应用程序数据,并且它可以正常工作! 你可以试试看吗

同样,Android 9和Android 8上的React Native 0.60.4

有什么办法吗?

如果有人对Android调试有很好的了解,这是我们刚刚报告的哨兵错误。

反应本色0.60.4

https://sentry.io/share/issue/e0c581e2e99a4ca48199647b8bd3f497/

同样,Android 9上的React Native 0.60.5

你好! 我们通过从TextInput中删除underlineColorAndroid属性并将此行添加到内部(android / src / main / res / values / styles.xml)的styles.xml中来解决了此问题

<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item>

这是错误报告吗?

您阅读过《贡献准则》吗?

是的,很抱歉,除了该堆栈跟踪信息之外,我无法提供有关此异常的更多信息,因为崩溃报告是从Google Analytics(分析)收集的,我不知道会再次出现此异常。

环境

环境:
作业系统:macOS Sierra 10.12.6
节点:8.4.0
纱:0.27.5
npm:5.4.0
Android Studio:3.0

软件包:(需要=>已安装)
反应本机:0.51.0 => 0.51.0
反应:16.0.0-alpha.12 => 16.0.0-alpha.12

目标平台:Android(7.1.1)
手机:MIX 2
的安卓:7.1.1
java.lang.NullPointerException:
尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild(DrawableContainer.java:888)在
android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466)在
android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.view.View.drawableStateChanged(View.java:18002)在
android.widget.TextView.drawableStateChanged(TextView.java:4097)在
android.view.View.refreshDrawableState(View.java:18071)在
android.view.View.setPressed(View.java:8543)在
android.view.View.setPressed(View.java:8521)在
android.view.View.onTouchEvent(View.java:11218)在
android.widget.TextView.onTouchEvent(TextView.java:8467)在
com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

我也反应本地0.60.4

RN 0.60.5最近开始崩溃,主要是在Android 8/9上运行(可能也是10,尚未进行广泛测试)。

https://github.com/facebook/react-native/issues/17530#issuecomment -504044357似乎对我有用。 通常,崩溃将在测试组件经历的前约5次迭代中显示。 添加该行之后,在我停止它之前,它运行了〜200次迭代而没有崩溃。

编辑:使用测试组件,我也能够在Android 6上可靠地重现此问题,尽管建议的修复似乎也解决了该问题。

同样在RN 0.61

嗨,大家好

这个问题仍然存在,它破坏了我的应用程序-一切都比我添加一个fetch调用运行的更好,现在,即使我将其注释掉,也无法再次运行该应用程序:cry:我正在使用Expo btw

编辑:我通过在设备上重新安装expo应用程序解决了expo的问题

也遇到此错误(RN:0.61.1,Android 10 API 29)。 'npm start --reset-cache'似乎已修复。

@johnbowdenatfacet,您不妨尝试上面我的评论中提供的嵌入式测试组件,以确认修复程序。

同样的问题。

React-Native 0.59.10
安卓系统

java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures(DrawableContainer.java:875)
在android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity(DrawableContainer.java:1158)
在android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
在android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)

同样的问题。

你好! 我们通过从TextInput中删除underlineColorAndroid属性并将此行添加到内部(android / src / main / res / values / styles.xml)的styles.xml中来解决了此问题

<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

解决了我的问题,非常感谢。

我刚运行(react-native run-android),这解决了我的问题

0.61.3上的相同问题

我仍然面临这个问题。 我们有一些用户报告Android应用程序崩溃,但是它随机发生,以至于我无法复制。

+1,也发生在我身上

@pedrosimao,您不妨尝试上面我的评论中提供的嵌入式测试组件,以可靠地重现故障。 该评论还指出了该问题的解决方法。

我为我缩小了从本地库中导入的问题。

更新:
我重新启动了我的PC和手机,然后再次运行,它的运行就像是魅力:)

我也有这个。 我已经通过expo r -c重新运行expo解决了这个问题

报告RN 0.59.10的相同问题

我发现手动测试非常流行,所以我编写了一个组件来自动测试人们在上面报告的某些场景。 您将在下面找到组件。 您只需将其渲染到某个地方即可完成工作。

这样做,我发现您只需要按照@Hopding的建议将以下内容添加到styles.xml中的AppTheme中
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

不需要任何其他操作,并且不需要__ underlineColorAndroid来设置

此修复程序的主要缺点是,您必须重新设置TextInputs的样式,以免造成填充的损失,并且还失去实际的下划线行为,这对我们来说是一个好处,因为我们始终将其设置为“透明”与iOS保持一致。 如果需要,可以制作一个监视onFocusonBlur的包装器组件,并制作自己的下划线。

我的React Native版本是0.57.3

这是我使用测试组件发现的其他一些内容:

  1. 我的低规格android平板电脑设备根本无法引起崩溃。 但是,在运行Android 7的Samsung S6 Edge手机上,重现非常容易。我猜是在一种竞争条件下,需要更快的设备来激发它。
  2. 滚动文本输入没有什么区别,而且即使不使用ScrollView,也可以轻松重现该问题。
  3. 无需输入文本。 仅仅改变焦点就足以导致崩溃。
  4. 设置下划线的颜色没有区别,即使undefined也会导致崩溃,但是您可能希望这样做,因为RN现在默认将其设置为“透明”
  5. 一次显示大量的TextInputs可以使崩溃发生的速度更快(100而不是屏幕上的10)。
  6. 我无法使用displayForMs: 0重现崩溃,这表明它仅在最近才创建TextInputs时发生。

如果您不想在测试时徘徊,可以捕获adb logcat的输出,并查找由组件和崩溃报告生成的控制台消息。

如果您想使用它,这是我的测试组件。 测试参数设置为通常在30秒内导致崩溃。

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

import * as React from "react";
import { View, ScrollView, TextInput, Text, StyleSheet } from "react-native";

// These are the test parameters
const params = {
  underlineColors: ["red", undefined, "transparent", "rgba(0, 0, 0, 0)"],  // The colors to test
  numberOfInputs: 100, // How many TextInput to render at a time
  focusIntervalMs: 200, // How often to change focus between them
  displayForMs: 3000, // How long to display them (set to 0 for indefinite)
  delayDisplayForMs: 10, // How long to delay between displays
  withScrollView: false // Whether to use a ScrollView
};

const testText = index =>
  `Testing underlineColor = ${params.underlineColors[index] || "undefined"}`;

class AndroidTextInputTest extends React.Component{
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log(`Testing with params = `, JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
      if (this.focussedInputIndex >= this.textInputRefs.length) {
        this.focussedInputIndex = 0;
      }
      const textInputRef = this.textInputRefs[this.focussedInputIndex];
      const textInput = this.refs[textInputRef];
      if (textInput) {
        this.focussedInputIndex++;
        this.refs[textInputRef].focus();
      }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
      console.log(testText(this.state.underlineColorIndex));
      this.setState({ showInputs: true });
      if (params.displayForMs) {
        setTimeout(this._unshowInputs, params.displayForMs);
      }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
      let next = this.state.underlineColorIndex + 1;
      if (next === params.underlineColors.length) {
        next = 0;
      }
      this.setState({
        underlineColorIndex: next,
        showInputs: false,
        startKey: this.state.startKey + params.numberOfInputs
      });
      setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

    if (this.state.showInputs) {
      for (let i = 0; i < params.numberOfInputs; i++) {
        const key = this.state.startKey + i + "";
        refs.push(key);
        textInputs.push(
          <TextInput
            ref={key}
            key={key}
            placeholder={key}
            underlineColorAndroid={underlineColor}
            style={styles.textInput}
          />
        );
      }
      if (!this.textInputRefs) {
        this.textInputRefs = refs;
      }
    }

    return (
      <View style={styles.mainView}>
        <Text>{testText(underlineColorIndex)}</Text>
        {params.withScrollView ? (
          <React.Fragment>
            <Text>With ScrollView</Text>
            <ScrollView>{textInputs}</ScrollView>
          </React.Fragment>
        ) : (
          <React.Fragment>{textInputs}</React.Fragment>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center"
  },
  textInput: {
    backgroundColor: "white",
    margin: 5,
    width: 300
  }
});

export default AndroidTextInputTest;

尝试了此操作,但TextInputs上没有显示键盘。 有什么办法吗?

感谢您尝试使用我的组件@saketkumar。

我想不起来是否需要为该测试出现键盘,尽管我希望在聚焦文本输入时会出现键盘。 您使用的是实际设备还是仿真器?

当焦点对准文本输入时,您能看到光标出现吗?该组件是否能够为您重现崩溃?

相同

在各种Android手机上发生反应0.59。

随机出现在Flatlist内嵌套TextInput组件中

试图按照本线程中的讨论在TextInput上设置underlineColorAndroid={null} atrribute,但错误仍然存​​在

我必须重启手机并重新安装EXPO才能修复。 如果那对您不起作用,我将尝试清除您的缓存并清除EXPO APP本身的缓存。

一开始不知道该错误是如何发生的。 我无法重新创建它,也无法弄清楚如何防止它再次发生。
它只是开始,无论我在代码中进行了什么更改,都无法修复它。 确实是EXPO APP的问题,因为我在APP中看到错误,但在控制台或其他任何地方都看不到。

+1错误在RN 0.59.9中仍然存在。 从Firebase crashlytics报告

第一个在RN 0.61上出现此错误?

@diegotsi的解决方案在RN 0.61中
这是一个严重的问题,因为它是在预生产环境中首先发生在我身上的,而且如果没有崩溃解析程序,我将永远无法追踪它,因为行为不稳定会使其难以复制。

这是错误报告吗?

您阅读过《贡献准则》吗?

是的,很抱歉,除了该堆栈跟踪信息之外,我无法提供有关此异常的更多信息,因为崩溃报告是从Google Analytics(分析)收集的,我不知道会再次出现此异常。

环境

环境:
作业系统:macOS Sierra 10.12.6
节点:8.4.0
纱:0.27.5
npm:5.4.0
Android Studio:3.0

软件包:(需要=>已安装)
反应本机:0.51.0 => 0.51.0
反应:16.0.0-alpha.12 => 16.0.0-alpha.12

目标平台:Android(7.1.1)
手机:MIX 2
的安卓:7.1.1
java.lang.NullPointerException:
尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild(DrawableContainer.java:888)在
android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466)在
android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.view.View.drawableStateChanged(View.java:18002)在
android.widget.TextView.drawableStateChanged(TextView.java:4097)在
android.view.View.refreshDrawableState(View.java:18071)在
android.view.View.setPressed(View.java:8543)在
android.view.View.setPressed(View.java:8521)在
android.view.View.onTouchEvent(View.java:11218)在
android.widget.TextView.onTouchEvent(TextView.java:8467)在
com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

这是错误报告吗?

您阅读过《贡献准则》吗?

是的,很抱歉,除了该堆栈跟踪信息之外,我无法提供有关此异常的更多信息,因为崩溃报告是从Google Analytics(分析)收集的,我不知道会再次出现此异常。

环境

环境:
作业系统:macOS Sierra 10.12.6
节点:8.4.0
纱:0.27.5
npm:5.4.0
Android Studio:3.0

软件包:(需要=>已安装)
反应本机:0.51.0 => 0.51.0
反应:16.0.0-alpha.12 => 16.0.0-alpha.12

目标平台:Android(7.1.1)
手机:MIX 2
的安卓:7.1.1
java.lang.NullPointerException:
尝试在null对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)'
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild(DrawableContainer.java:888)在
android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466)在
android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488)在
android.graphics.drawable.Drawable.setState(Drawable.java:735)在
android.view.View.drawableStateChanged(View.java:18002)在
android.widget.TextView.drawableStateChanged(TextView.java:4097)在
android.view.View.refreshDrawableState(View.java:18071)在
android.view.View.setPressed(View.java:8543)在
android.view.View.setPressed(View.java:8521)在
android.view.View.onTouchEvent(View.java:11218)在
android.widget.TextView.onTouchEvent(TextView.java:8467)在
com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

当我更改样式时,例如删除justifyContent或smthng并重新启动应用程序时,会发生这种情况。

@cinocai@Sargnec等,此评论线程的时间太长了,以至于我认为人们缺少了我上面发布的测试组件

上面的几个人已使用它成功重现了此问题,并验证了解决方案,该注释中也提到了该解决方案。

@ glenn-axsy:与测试组件的出色协作,有助于更好地理解该问题。
但是我正在努力寻找解决方案。

正如您建议的那样,设置displayForMs: 0不会崩溃。 如果我没看错,这样做, 100 TextInputs不会卸载(仅更新),也不会卸载。

我尝试自行设置displayForMs: 3000并进行了2个其他更改,这使所有100挂载(仅更新)在每个设置状态上。

变化

  • const key = this.state.startKey + i +“”; ---> const键= ${i} ;
  • 禁用渲染中的if (this.state.showInputs) {支票。


/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

import * as React from 'react';
import { View, ScrollView, TextInput, Text, StyleSheet } from 'react-native';

// These are the test parameters
const params = {
    underlineColors: ['red', undefined, 'transparent', 'rgba(0, 0, 0, 0)'], // The colors to test
    numberOfInputs: 100, // How many TextInput to render at a time
    focusIntervalMs: 200, // How often to change focus between them
    displayForMs: 3000, // How long to display them (set to 0 for indefinite)
    delayDisplayForMs: 10, // How long to delay between displays
    withScrollView: false, // Whether to use a ScrollView
};

const testText = index =>
    `Testing underlineColor = ${params.underlineColors[index] || 'undefined'}`;

class AndroidTextInputTest extends React.Component {
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0,
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log('Testing with params = ', JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
        if (this.focussedInputIndex >= this.textInputRefs.length) {
            this.focussedInputIndex = 0;
        }
        const textInputRef = this.textInputRefs[this.focussedInputIndex];
        const textInput = this.refs[textInputRef];
        if (textInput) {
            this.focussedInputIndex++;
            this.refs[textInputRef].focus();
        }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
        console.log(testText(this.state.underlineColorIndex));
        this.setState({ showInputs: true });
        if (params.displayForMs) {
            setTimeout(this._unshowInputs, params.displayForMs);
        }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
        let next = this.state.underlineColorIndex + 1;
        if (next === params.underlineColors.length) {
            next = 0;
        }
        this.setState({
            underlineColorIndex: next,
            showInputs: false,
            startKey: this.state.startKey + params.numberOfInputs,
        });
        setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

// CHANGE 2
    // if (this.state.showInputs) {
    for (let i = 0; i < params.numberOfInputs; i++) {
        const key = `${i}`; // CHANGE 1
        refs.push(key);
        textInputs.push(
            <textinput i="23"/>
        );
    }
    if (!this.textInputRefs) {
        this.textInputRefs = refs;
    }
    // }

    return (
        <view i="24">
            <text i="25">{testText(underlineColorIndex)}</text>
            {params.withScrollView ? (
                <react.fragment i="26">
                    <text i="27">With ScrollView</text>
                    <scrollview i="28">{textInputs}</scrollview>
                </react.fragment>
            ) : (
                <react.fragment i="29">{textInputs}</react.fragment>
            )}
        </view>
    );
  }
}

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        alignItems: 'center',
    },
    textInput: {
        backgroundColor: 'white',
        margin: 5,
        width: 300,
    },
});

export default AndroidTextInputTest;

两项更改均确保调用_showInputs_unshowInputs既不会重新安装TextInput,也不会安装任何新的(最大100)。
而且它没有像预期的那样崩溃。

最后,确定是否确实要重新安装(大量的TextInputs)导致该问题。 我尝试在正在处理的应用程序中重现该文件,该应用程序报告了崩溃。

在该应用程序中,有2个屏幕,一个屏幕有2个TextInputs,另一个屏幕有4个,我一直在屏幕上来回导航,这当然会重新安装整个屏幕内容,最终在一段时间后我就崩溃了。

这样,我可以推断出不让TextInput挂载不是一个可行的解决方案。 但是仍然不知道到底是什么原因造成的!

注意

  • 我认为它与underlineColorAndroid属性无关,因为我尝试用<item name="android:editTextBackground"><strong i="18">@android</strong>:color/transparent</item>覆盖它,并且没有区别。 [编辑:它实际上已经解决了该问题]
  • 我也可以不使用ScrollView而崩溃。
  • 并且聚焦TextInput也不是导致崩溃的必要,只需重新安装那些100 TextInputs就会导致崩溃。

谢谢!

@rimzici是的,是的。 崩溃与重新安装/实例化edittext有关,有时背景drawables为空。 但是奇怪的是,当您设置<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> ,这种情况不会发生。 似乎可绘制对象在克隆后以某种方式被回收了,设置背景时它可以具有默认值吗?

谢谢@rimzici。

听到只设置<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item>并不能解决您的问题,这令人失望。 至少您现在可以轻松重现该错误,并且可以尝试其他一些方法。

请发表您可能有的其他意见。

感谢@sunnylqm和@ glenn-axsy! 没错,设置<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item>确实可以解决。

我忘了我在主活动中设置了启动主题,以在加载JS时覆盖白色屏幕。

现在,我可以确认该变通方法可以有效地防止崩溃。

将更新任何更多信息。

react-native 0.61.5 <-也在这里!

react-native 0.62.0.rc-1 <-也在这里!

[email protected]出现相同错误

击中多次出现的Sentry捕获的同一错误: https :

在RN 0.59.9上

RN 0.55.4上的相同错误

RN 2.0.1上的相同问题

不要将'underlineColorAndroid'道具设置为任何TextInput并通过本机样式删除所有文本输入背景。

转到android \ app \ src \ main \ res \ values \ styles.xml

更改如下所示:

在RN 0.61.5上相同

我发现手动测试非常流行,所以我编写了一个组件来自动测试人们在上面报告的某些场景。 您将在下面找到组件。 您只需将其渲染到某个地方即可完成工作。

这样做,我发现您只需要按照@Hopding的建议将以下内容添加到styles.xml中的AppTheme中
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

不需要任何其他操作,并且不需要__ underlineColorAndroid来设置

此修复程序的主要缺点是,您必须重新设置TextInputs的样式,以免造成填充的损失,并且还失去实际的下划线行为,这对我们来说是一个好处,因为我们始终将其设置为“透明”与iOS保持一致。 如果需要,可以制作一个监视onFocusonBlur的包装器组件,并制作自己的下划线。

我的React Native版本是0.57.3

这是我使用测试组件发现的其他一些内容:

  1. 我的低规格android平板电脑设备根本无法引起崩溃。 但是,在运行Android 7的Samsung S6 Edge手机上,重现非常容易。我猜是在一种竞争条件下,需要更快的设备来激发它。
  2. 滚动文本输入没有什么区别,而且即使不使用ScrollView,也可以轻松重现该问题。
  3. 无需输入文本。 仅仅改变焦点就足以导致崩溃。
  4. 设置下划线的颜色没有区别,即使undefined也会导致崩溃,但是您可能希望这样做,因为RN现在默认将其设置为“透明”
  5. 一次显示大量的TextInputs可以使崩溃发生的速度更快(100而不是屏幕上的10)。
  6. 我无法使用displayForMs: 0重现崩溃,这表明它仅在最近才创建TextInputs时发生。

如果您不想在测试时徘徊,可以捕获adb logcat的输出,并查找由组件和崩溃报告生成的控制台消息。

如果您想使用它,这是我的测试组件。 测试参数设置为通常在30秒内导致崩溃。

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

import * as React from "react";
import { View, ScrollView, TextInput, Text, StyleSheet } from "react-native";

// These are the test parameters
const params = {
  underlineColors: ["red", undefined, "transparent", "rgba(0, 0, 0, 0)"],  // The colors to test
  numberOfInputs: 100, // How many TextInput to render at a time
  focusIntervalMs: 200, // How often to change focus between them
  displayForMs: 3000, // How long to display them (set to 0 for indefinite)
  delayDisplayForMs: 10, // How long to delay between displays
  withScrollView: false // Whether to use a ScrollView
};

const testText = index =>
  `Testing underlineColor = ${params.underlineColors[index] || "undefined"}`;

class AndroidTextInputTest extends React.Component{
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log(`Testing with params = `, JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
      if (this.focussedInputIndex >= this.textInputRefs.length) {
        this.focussedInputIndex = 0;
      }
      const textInputRef = this.textInputRefs[this.focussedInputIndex];
      const textInput = this.refs[textInputRef];
      if (textInput) {
        this.focussedInputIndex++;
        this.refs[textInputRef].focus();
      }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
      console.log(testText(this.state.underlineColorIndex));
      this.setState({ showInputs: true });
      if (params.displayForMs) {
        setTimeout(this._unshowInputs, params.displayForMs);
      }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
      let next = this.state.underlineColorIndex + 1;
      if (next === params.underlineColors.length) {
        next = 0;
      }
      this.setState({
        underlineColorIndex: next,
        showInputs: false,
        startKey: this.state.startKey + params.numberOfInputs
      });
      setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

    if (this.state.showInputs) {
      for (let i = 0; i < params.numberOfInputs; i++) {
        const key = this.state.startKey + i + "";
        refs.push(key);
        textInputs.push(
          <TextInput
            ref={key}
            key={key}
            placeholder={key}
            underlineColorAndroid={underlineColor}
            style={styles.textInput}
          />
        );
      }
      if (!this.textInputRefs) {
        this.textInputRefs = refs;
      }
    }

    return (
      <View style={styles.mainView}>
        <Text>{testText(underlineColorIndex)}</Text>
        {params.withScrollView ? (
          <React.Fragment>
            <Text>With ScrollView</Text>
            <ScrollView>{textInputs}</ScrollView>
          </React.Fragment>
        ) : (
          <React.Fragment>{textInputs}</React.Fragment>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center"
  },
  textInput: {
    backgroundColor: "white",
    margin: 5,
    width: 300
  }
});

export default AndroidTextInputTest;

可以为我确认此问题!

我很高兴我的测试组件和建议的解决方案为您服务@gagangoku

对于那些想要在上下文中看到它的人,链接在这里

也许您会足够友善地将该链接添加到您的评论中。

@ glenn-axsy的修复程序对我有用(测试组件did也是如此),但在此过程中我遇到了一些麻烦,可能会帮助另一个迷路的灵魂:

我的AppTheme在AndroidManifest.xml文件中被不当覆盖,因为开发人员在添加启动画面活动时犯了一个错误。 一旦我修复并确认确实正在使用AppTheme(例如,通过更改默认文本颜色并在应用程序中看到它),则此修复程序便真正起作用了。

非常感谢,祝您好运!

使用expo发生在我身上。 我运行此命令。
sudo expo start -c ,问题解决了。

@HakimAsa我建议使用测试组件来确保它确实消失了。

他们奇怪的是,代码已经运行了一个月没有出现此问题。 但是在重复更改后,昨天我遇到了问题……无论如何,我会尝试您的建议@ glenn-axsy

在我的情况下,当renderItem返回<TextInput />时,它在FlatList中进行封装。 所以我通过返回<><TextInput /></>解决了这个问题

@MahmoudHemaid这个问题很难重现,以致您可能尚未真正解决。 更多信息在这里

android.graphics.drawable.Drawable $ constantstate,newdrawable在我单击图像时出现空引用错误,该图像位于最右角。 该图像就像一个切换按钮。 我正在使用RN 0.61.2。 请有人帮我解决这个问题。 它仅在独立apk中发生

@ glenn-axsy https://github.com/facebook/react-native/issues/17530#issuecomment -504044357

这样做,我发现您只需要按照@Hopding的建议将以下内容添加到styles.xml中的AppTheme中

<item name="android:editTextBackground"><strong i="9">@android</strong>:color/transparent</item>

https://github.com/facebook/react-native/pull/27782#issuecomment -575753501

最简单的示例是仅创建一个EditText其中包含一个空的AttributeSet并且不包含(0)个默认样式属性:

<strong i="18">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

ReactTextInput可能会被想要提供其自己的EditText实例的子lasses覆盖。

EditText android构造函数:

public class EditText extends TextView {
     public EditText(Context context, AttributeSet attrs, int defStyleAttr) {
           this(context, attrs, defStyleAttr, 0);
     }
}

调用View构造函数docs

image

我会继续调查。 谢谢

嘿@ glenn-axsy,我已经为此苦苦挣扎了好几个小时,所以我真的希望您能为我提供帮助。 我在Android手机上使用的是AndroidTextInputTest。 如果那很重要,我将使用Typescript运行React Native,并通过Expo这样做。这意味着我没有任何EditText类型的东西。
package.json =“ react-native”中的React native:“ ^ 0.61.4”

我使用了参数:

const params = {
underlineColors:[“红色”,未定义,“透明”,“ rgba(0,0,0,0)”],//要测试的颜色
numberOfInputs:100,//一次渲染多少TextInput
focusIntervalMs:200,//多久更改一次焦点
displayForMs:3000,//显示它们的时间(不确定时设置为0)
delayDisplayForMs:10,//显示之间延迟多长时间
withScrollView:false,//是否使用ScrollView
};

在获得“尝试调用虚拟方法”之前,我的输出是:

用params = {“ underlineColors”:[“ red”,null,“ transparent”,“ rgba(0,0,0,0)”],“ numberOfInputs”:100,“ focusIntervalMs”:200,“ displayForMs”:进行测试3000,“ delayDisplayForMs”:10,“ withScrollView”:false}
calendarVisible的参数为true,状态为true
测试下划线颜色=红色
测试underlineColor =未定义
测试underlineColor =透明
测试underlineColor = rgba(0,0,0,0)
测试下划线颜色=红色
测试underlineColor =未定义
测试underlineColor =透明

因此,我的问题是,如何使用这些参数和崩溃前看到的输出来诊断应用程序出了什么问题?

谢谢您的帮助。

@ucheNkadiCode这是一种快速重现此问题的测试,而不是解决方案。 解决方案是

<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

@ucheNkadiCode这是一种快速重现此问题的测试,而不是解决方案。 解决方案是

<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

@sunnylqm我有点困惑,因为我使用的是react native,所以我不在代码中的任何地方使用item。

我使用如下所示的TextInput:

文字输入
ref = {key}
键= {键}
占位符= {key}
underlineColorAndroid = {underlineColor}
style = {styles.textInput}

谢谢

@ucheNkadiCode
image
但是对于博览会,您可能需要先退出以修改这样的设置

@ucheNkadiCode
image
但是对于博览会,您可能需要先退出以修改这样的设置

是的,这当然是问题所在。 我不想为此付出代价,在开发初期就退出我的react本地应用程序。 我希望找到一个使我保持在React Native中的解决方案。

谢谢你的帮助

@ axsy-dev @ucheNkadiCode

我的评论朝那个方向努力,将其修正为请求请求,以避免与TextInput prop underlineColorAndroid 。 ReactNative以编程方式设置主题...请查看我的评论并返回一些反馈,因为我无法解决此问题,并且我正在处理其他请求请求。 谢谢

我实际上能够通过重写react ReactTextInput方法来解决此问题

<strong i="12">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

但这只是禁用通过getThemedContext()传递给EditText组件的样式

此外,堆栈还告诉我们此错误是由ReactEditText.onTouchEvent触发的,因此当用户触摸TextInput组件时。

我的评论朝那个方向努力,将其修正为请求请求,以避免与TextInput prop underlineColorAndroid 。 ReactNative以编程方式设置主题...请查看我的评论并返回一些反馈,因为我无法解决此问题,并且我现在正在处理其他请求。

我实际上能够通过重写react ReactTextInput方法来解决此问题

<strong i="12">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

但这只是禁用通过getThemedContext()传递给EditText组件的样式

此外,堆栈还告诉我们此错误是由ReactEditText.onTouchEvent触发的,因此当用户触摸TextInput组件时。

@ axsy-dev @ fabriziobertoglio1987。 所以我没有可以在我的项目目录中使用ReactEditText找到任何元素,并且我的目录中也没有任何.java文件。 我将TypeScript与React本机一起使用,所以我的大多数文件是.tsx或.ts,除了大量的node_modules之外。

不幸的是,我没有使用Native Android。

@ucheNkadiCode要解决此问题,现在您需要弹出,否则在Reactnative中重新创建此场景,编写一个pull请求,它会在react-native中合并,然后在以后的expo中合并。

@ucheNkadiCode恐怕我不使用Expo,但这听起来像@sunnylqm知道他在说什么

我只是在博览会上面临同样的问题。
我试过了:watchman watch-del-all && expo r -c
但现在仍然是个好消息。

我面临着同样的问题,如果我将TextInput更改为文本,该问题将消失。

2年前的评论仍然有效。

我将其范围缩小到在FlatList中呈现的<TextInput> 。 当我用<Text>替换它时,问题消失了。

重置缓存似乎可以短暂帮助,但是单击几次按钮后我的应用程序将再次崩溃。

使用我的测试组件进行@diegoboston测试,您可以在不使用FlatList的情况下重现它。 您可以在此处的评论中找到测试组件和解决方法/解决方案。

我正在使用expo SDK 37,它在内部使用react native 0.61。
奇怪的是我没有任何问题,但是当我重新启动builder时,突然出现了这个问题。 还没有解决吗?

RN 0.62.2 + Android此处相同。
在生产模式下调用此错误。

image

从设置中清除应用程序缓存解决了我的问题,但这似乎不是可接受的解决方案。

我致力于这个问题,这是我的发现(以前的文章在这里)。

1)我们知道在主题中添加android:editTextBackgroundcolor/transparent可以解决此问题

<item name="android:editTextBackground"><strong i="10">@android</strong>:color/transparent</item>

2)将ReactEditTextShadowNode方法createDummyEditText拖到下面的代码中也可以解决此问题(在我看来,禁用了EditText的所有样式)

<strong i="16">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

我现在对这个问题的理解是,在Android中,您可以通过两种方式设置样式

1)编写类似html元素和样式的XML并将其应用
2)调用EditTextView构造函数,并随其传递上下文和其他属性/样式。

ReactEditText使用createDummyEditText创建EditText实例,然后更改某些样式(填充,布局..etc),但这与布局(填充,边距)有关,并且而不是背景色等。实际上,我尝试将这些代码行从setBackgroundTint更改redtransparent ,但它不起作用...

https://github.com/facebook/react-native/blob/95546d932f03f9af990c2a11576a4c6297136fd4/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java#L85 -L100

通过以下方法更改背景色

https://github.com/facebook/react-native/blob/95546d932f03f9af990c2a11576a4c6297136fd4/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundManager.java#L45 -L51

在星期一,我将再次尝试更改setBackgroundColor方法并在运行时将背景色设置为透明色……这将是我解决此问题的第一个线索

堆栈在createInternalEditText上失败

  /**
   * May be overriden by subclasses that would like to provide their own instance of the internal
   * {<strong i="9">@code</strong> EditText} this class uses to determine the expected size of the view.
   */
  protected EditText createInternalEditText() {
    return new EditText(getThemedContext());
  }

createInternalEditText是在失败之前调用的最后一个方法,堆栈的其余部分来自Android sdk OpenSource库,它不是造成此问题的真正原因

设置android:editTextBackground可能只是超过了导致问题的默认主题中的某些项目值。 问题与传递getThemedContext的构造函数有关,其中还包含主题

<item name="android:editTextBackground"><strong i="17">@android</strong>:color/transparent</item>

出于这个原因,我认为应该在React如何

伙计们重新启动打包程序并清除缓存对我有用!

但这是临时解决方案,我该如何解决此永久问题?

我试图以编程方式在Java中将背景色设置为透明,但仍然触发运行时错误,这使我相信以下代码

<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item>

只是来自

https://github.com/facebook/react-native/blob/9312313c3c6701490d728f912e0b0bbd16d91ad9/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java#L73 -L85

这显然是堆栈中问题的原因

该方法负责设置EditText的样式,

问题在于原始问题堆栈似乎具有不同的日志,并且似乎与附加的测试用例无关。 下面的堆栈来自ReactEditText.onTouchEvent ,这意味着用户触摸TextInput并触发了错误。

原始日志错误

java.lang.NullPointerException:
tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference at
android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:888) at
android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466) at
android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104) at
android.graphics.drawable.Drawable.setState(Drawable.java:735) at
android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331) at
android.graphics.drawable.Drawable.setState(Drawable.java:735) at
android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488) at
android.graphics.drawable.Drawable.setState(Drawable.java:735) at
android.view.View.drawableStateChanged(View.java:18002) at
android.widget.TextView.drawableStateChanged(TextView.java:4097) at
android.view.View.refreshDrawableState(View.java:18071) at
android.view.View.setPressed(View.java:8543) at
android.view.View.setPressed(View.java:8521) at
android.view.View.onTouchEvent(View.java:11218) at
android.widget.TextView.onTouchEvent(TextView.java:8467) at
com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

其他类型的错误https://github.com/facebook/react-native/issues/17530#issuecomment -376917781

其他日志错误

致命异常:java.lang.NullPointerException:尝试在android上的空对象引用上调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable(android.content.res.Resources)' .graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures(DrawableContainer.java:875)在android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity(DrawableContainer.java:1158)在android.graphics.drawable.DrawableContainer(get :433),位于android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258),位于android.view.View.computeOpaqueFlags(View.java:16791),位于android.view.View.setBackgroundDrawable(View.java:21710)在android.view.View.setBackground(View.java:21603)处。(View.java:5547)在android.widget.TextView中。(TextView.java:1135)位于android.widget.EditText。(EditText.java:107)位于android.widget.EditText。(EditText.java:103),位于android.widget.EditText。(EditText.java:99),位于android.widget.EditText。(EditText.java:95),位于com.facebook.react.views.textinput.ReactEditText。(ReactEditText.java:92)位于com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:94)位于com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:65) com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:218)上的com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:46)在com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation处。执行com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:923)的com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCalled.UIViewOperationQueue.java:150)在com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame(ReactChoreog)上的com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31) com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame(ChoreographerCompat.java:107)位于android.view.Choreographer $ CallbackRecord.run(Choreographer.java:909)位于rapher.java:136)。 android.view.Choreographer.doFrame(Choreographer.java:655)上的view.Choreographer.doCallbacks(Choreographer.java:723)android.view.Choreographer $ FrameDisplayEventReceiver.run(Choreographer.java:897)在android.os.Handler .handleCallback(Handler.java:789)在android.os.Handler.dispatchMessage(Handler.java:98)在android.os.Looper.loop(Looper.java:164)在android.app.ActivityThread.main(ActivityThread。 java:6938),位于com.android.internal.os.Zygote的java.lang.reflect.Method.invoke(Method.java)$ MethodAndArgsCaller.run,位于com.android.internal.os.ZygoteInit(Zygote.java:327) .main(ZygoteInit.java:1374)

另一方面,我问自己是否可以接受https://github.com/facebook/react-native/issues/17530#issuecomment -504044357,因为它不会通过单击TextInput而是通过手动操作来导致错误以编程方式..

我相信讨论中的某个人将进行适当的研究并解决这个问题。 非常感谢,祝您好运! :笑脸:

伙计们,尝试再次运行“ npm install”。 它为我工作。

我尝试添加<item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> ,这可以防止应用崩溃,但是文本框始终在大大小小之间闪烁,并且不可用,还有其他人有吗?

就我而言,我使用样式化组件,我将一个道具名称设置为“ right”,我认为这很特殊,我改为“ isRight”解决了我的问题。

进行发布构建并在您从未见过此错误的apk上进行测试

原始评论报告了通过分析错误报告获得的问题,而不是开发中的错误,我认为我们需要保持专注。

您可以尝试这两种方法中的任何一种,无论哪种都适用于您的应用程序:

  1. 删除您应用的缓存数据,然后重新加载
  2. 使用npm start --reset-cache重新启动服务器

似乎在Android项目上打开https://issuetracker.google.com/issues/37068452有一个相关问题

  1. 创建一个不覆盖getConstantState()的自定义Drawable实现。
  2. 创建一个LayerDrawable实例,并将自定义drawable的实例作为子实例。
  3. 在LayerDrawable上调用mutate()。
    Drawable dummyDrawable = new Drawable() {
        <strong i="12">@Override</strong>
        public void draw(Canvas canvas) {
            canvas.drawColor(Color.RED);
        }
        <strong i="13">@Override</strong> public void setAlpha(int alpha) {}
        <strong i="14">@Override</strong> public void setColorFilter(ColorFilter cf) {}
        <strong i="15">@Override</strong> public int getOpacity() { return 0; }
    };
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] { dummyDrawable });
    layerDrawable.mutate();

在我们的例子中,运行时错误从ReactEditText (从AppCompatEditText继承)的这一行触发

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java#L83

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L126

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L111

https://github.com/facebook/react-native/issues/17530#issuecomment -615131077

<TextInput style={styles.input} />将通过ReactNativeBridge将信息从JavaScript运行时作为JSON发送到Android,Android Java API将使用该信息来创建View实例并在屏幕中进行填充(显示)。

它将$$$ Context对象传递给View构造函数,该构造函数将为该<TextInput />扩大deault布局,然后无论何时我们更改诸如underlineColorAndroid的道具,我们将为ex调用特定的Android API方法。 setUnderlineColorAndroid("red")和Android API将负责更新<TextInput />下划线颜色。

image

如果37068452导致运行时,那么我们必须是mutating() a BackgroundDrawable也许可以通过更改underlineColor ,但是在View构造函数中触发错误我们通过Context

我将尝试调试Android堆栈,但首先,我将尝试在“最小可复制示例”中转换本示例,并删除所有对于重现该错误不是必需的属性。

我能够创建最小可复制示例。
该问题是由TextInput键prop引起的。

使用键prop重新渲染大量TextInput组件将导致运行时错误。
TextInput的数目对于触发崩溃至关重要。

   // Does not crash after testing for 5 minutes
    for (let i = 0; i < 5; i++) { ..
   // Crashes after 20 seconds
    for (let i = 0; i < 100; i++) { ..
   // Crashes after 1 second
    for (let i = 0; i < 1000; i++) { ..

如果删除TextInput道具,则崩溃不会重现。 我将进行调查并尝试修复它。 运行此示例以重现它。

import * as React from "react";
import { View, TextInput } from "react-native";

class App extends React.Component{
  state = { startKey: 0 };
  componentDidMount() {
    this.interval = setInterval(this.updateKey, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateKey = () => {
    this.setState({
      startKey: this.state.startKey + 100
    });
  };

  render() {
    const textInputs = [];

    for (let i = 0; i < 100; i++) {
      const key = (this.state.startKey + i).toString();
      console.log("key", key);
      // REMOVE KEY PROP TO FIX THIS
      textInputs.push(
        <TextInput key={key} />
      );
    }

    return (
      <View>
        { textInputs }
      </View>
    );
  }
}

export default App;

如果您的data道具包括keyindexid这样的[{ key: "1"}, {key: "2"}, .. {key: "5000"}] ,则FlatList可以重现相同的问题, key自动将用于您的列表并导致运行时。 从data数组中删除这些键可修复错误并删除自动缓存。

https://github.com/facebook/react-native/blob/980900c6343b93259e46edd44b6f267aa534cde5/Libraries/Lists/FlatList.js#L122 -L123

import * as React from "react";
import { Text, FlatList, View, TextInput } from "react-native";

class App extends React.Component{
  state = { startKey: 0 };
  componentDidMount() {
    this.interval = setInterval(this.updateKey, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateKey = () => {
    this.setState({
      startKey: this.state.startKey + 100
    });
  };

  render() {
    const textInputs = [];

    for (let i = 0; i < 5000; i++) {
      const notKey = (this.state.startKey + i).toString();
      console.log("key", notKey);
      // REMOVE KEY OR ID FIELD TO FIX THIS
      // replacing notKey with key will trigger the runtime
      textInputs.push(
        { notKey }
      );
    }

    return (
      <FlatList
        data={textInputs}
        renderItem={({item}) => <TextInput value={"testing"} />}
      />
    );
  }
}

export default App;

问题似乎是由这行代码引起的。 我注释了这一行,并用const key = 500;替换了该行,该错误不会重现。

https://github.com/facebook/react-native/blob/980900c6343b93259e46edd44b6f267aa534cde5/Libraries/Lists/VirtualizedList.js#L802 -L802

一个例子是keyExtractor(item, ii)item = {"key":"450"}ii = 50和返回值key = 450会导致崩溃,但是我相信这不是真正的原因,而仅仅是表示密钥正在引起问题。 我会继续调查。 我在找工作。 非常感谢。 祝您周末愉快。

| 带运行时间|
|:-------------------------:|
| |

| 没有运行时间|
|:-------------------------:|
| |

@ fabriziobertoglio1987我有一个类似的结论https://github.com/facebook/react-native/issues/17530#issuecomment -573934341,即与重新安装/实例化edittext有关。 那时我不明白为什么当他们似乎没有理由要重新输入/重新实例化文本输入时。 现在,听起来可能是键的原因。

错误从这里抛出

https://github.com/aosp-mirror/platform_frameworks_base/blob/53a9ccaa926945149b4546c67b50ce1ae88ba777/graphics/java/android/graphics/drawable/DrawableContainer.java#L875

其中数组mDrawableFutures不为null,但其某些子元素可以为null。

mDrawableFutures只能从其他人克隆

https://github.com/aosp-mirror/platform_frameworks_base/blob/8857e6b645f9b91f44c8ea0ab8f441c9c0d63da6/graphics/java/android/graphics/drawable/DrawableContainer.java#L800 -L820

这意味着它在被克隆时不是非空的,但是在某种程度上其子元素在之后被销毁了。
以下是我的猜测:关键道具将触发差异过程,该过程将为textinputs构造阴影节点。 在此过程中,可绘制状态将被克隆。 但是,可能存在争用条件/非线程安全操作,在某些可绘制状态仍在使用时会破坏它们。 @ fabriziobertoglio1987

非常感谢@sunnylqm,我相信协作的力量,我正在尝试提出请求请求以查找一些工作。

我相信问题与使用key和React.PureComponent时传递的一些脏参数有关。

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Lists/VirtualizedList.js#L345 -L348

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Lists/VirtualizedList.js#L820

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Lists/VirtualizedList.js#L1254 -L1255

没错,实际上只有在使用TextInput组件时才会遇到此问题。 例如,用TextInput中的Text替换TextInput renderItem将解决此问题。

<FlatList
  renderItem={({item}) => <TextInput value={"testing"} />}

使用TextTextInput的区别在于const element将是ForwardRefTextInput 。 在下面的情况下, TextInput在到达某个键时创建运行时。 我还删除了underlineColorAndroid="transparent" ,这不是错误的原因,但我将其保留在下面的日志中。

https://github.com/facebook/react-native/blob/980900c6343b93259e46edd44b6f267aa534cde5/Libraries/Lists/VirtualizedList.js#L1985 -L1990

console.log("element", element);
//=> element <Text value="testing" />
//=> element <ForwardRef(TextInput) allowFontScaling={true} rejectResponderTermination={true} underlineColorAndroid="transparent" value="testing" />

TextInput返回forwardRef

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Components/TextInput/TextInput.js#L1153

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Components/TextInput/TextInput.js#L957 -L990

我相信Java API中的方法是从TextInput javascript API中调用的,但是参数丢失/不干净。 这可能是导致NPE运行时错误的原因,但是我需要研究JS TextInput API的各个方面以了解原因。

我认为key道具会引起问题,因为React机制基于比较key道具,如果不存在关键的道具机制,则不进行缓存,随后也不会出错。

明天我将尝试在上述消息中引用的代码中为您设置一个断点

非常感谢您的帮助。 希望我们能够一起编写请求请求并解决此问题。 祝你晚上好。 法布里佐

@sunnylqm

太长了,看不懂

我正在写请求请求来解决此问题。 修复起来很容易。

该问题是由EditText初始化中使用的默认BackgroundDrawable引起的

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L111

Drawable是我们正在使用的主题Theme.AppCompat.Light.NoActionBar 。 更改Drawable可以通过更改用于使用react-native初始化脚本初始化react-native android项目的模板xml文件来完成。

我将使用android默认提供的一个,或者创建一个自定义drawable并将其包含在每个项目初始化中。

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

<item name="android:editTextBackground"><strong i="18">@android</strong>:drawable/edit_text</item>

要么

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

<item name="android:editTextBackground">@drawable/custom_background_drawable</item>

长版

我引用sunnylqm https://github.com/facebook/react-native/issues/17530#issuecomment -660506001

以下是我的猜测:关键道具将触发差异过程,该过程将为textinputs构造阴影节点。 在此过程中,可绘制状态将被克隆。 但是,可能存在争用条件/非线程安全操作,在某些可绘制状态仍在使用时会破坏它们。

这行android:editTextBackground修复了错误,但是此行在ReactNative中做什么

1) AndroidManifest.xml分配android:theme="@style/AppTheme"

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.awesomeproject">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:theme="@style/AppTheme">

2)我们在res/values/styles.xml更改AppTheme res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:editTextBackground"><strong i="22">@android</strong>:drawable/edit_text</item>
    </style>
</resources>

3) EditText构造函数将调用super(context)context对象包括layoutthemeAppTheme )。

View构造函数将从context对象获取样式/主题/布局信息,并创建具有这些样式的EditText实例(xml类似于html),对其进行充气并在屏幕上显示它。

Android使用类似于html的xml来呈现静态视图,而使用Java来呈现动态的内容(例如Web中的JavaScript)。

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L111

4) ReactNative建立在Context API的顶部,但将使用1-3中的相同模式。
使用context对象初始化视图,然后使用JavaScript进行动态更改,而无需直接更改context实例,而是通过Android API使用react-native桥。

| 之前| 之后| 之后使用TextInput样式道具|
|:-------------------------:|:-------------------- -----:|:-------------------------:|
| | | |

我正在准备一个Pull请求,以更改初始化时用于EditText的默认Drawable。
主题中的Drawable Theme.AppCompat.Light.NoActionBar导致了此问题,将其替换为另一个drawable应该可以解决此问题。 可绘制的<strong i="27">@android</strong>:drawable/edit_text对于我们的设计而言太高了。 如果高度比父级高,则“父级视图”将适应默认的可绘制高度。 我相信ReactNative使用低高度的默认可绘制对象,然后使用match_parent使其适应父视图。

1)选项1-从其他主题中找到可绘制对象

2)选项2
根据android项目中的一个可用对象,在react-native模板中创建一个新的drawable,并将其高度始终设置为match_parent View。

我将以下高度为几个像素的可绘制对象添加到我的android项目中

Screenshot from 2020-07-20 13-34-54

背景可绘制对象适应其父视图的高度10

背景可绘制对象适应其父视图的高度100

似乎可以与较小的背景可绘制对象一起使用,那么我们只需要react-native init脚本即可默认使用该背景可绘制对象来初始化项目。 我将在请求请求中将上述解释更改添加到下面的文件中。

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

非常感谢。 法布里佐

RN 0.61.0 + Android API级别28面临相同的问题。
我将其范围缩小到Flatlist,TextInput和嵌套的Component渲染的某种组合

@ fabriziobertoglio1987我已经尝试过这种方法,但是也许我错过了某项我没有使它起作用的事情。 我对android知之甚少,很高兴您可以修复它。 虽然我仍然对关键道具感兴趣。

@ fabriziobertoglio1987反正我可以添加本机js代码以快速解决此问题吗? 让我知道。

@ asmi24886你可以找到一个测试组件可靠地再现这个问题和本地代码/配置的解决方法在我的评论在这里
我认为不存在仅使用JS代码的解决方法。

这是我以前的消息https://github.com/facebook/react-native/issues/17530#issuecomment -660908150的延续,我努力寻找自由职业者并写出pull请求以解决此问题。

我基于Theme.AppCompat.Light创建了一个自定义可绘制对象。

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
       android:insetTop="@dimen/abc_edit_text_inset_top_material"
       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">

    <selector>
        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
        <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
    </selector>

</inset>

运行时是由以下条目引起的,如果我删除此行,则可以从react-native中获取当前Drawable的精确副本,并且不会触发运行时错误。 我在我的https://github.com/facebook/react-native/issues/17530#issuecomment -660017858中包含了最小可复制示例

<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

我正在编写一个Pull Request,一旦合并Pull Request,您将可以使用upgrade-helper进行

拉取请求将包括RNTester应用程序中此场景的重现,模板的更改以及上述自定义可绘制对象的添加,以避免出现此问题。

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

这是一个视频,展示了当Drawable具有行<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>的运行时错误

这是一个视频,展示了当Drawable没有行<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>时的修复程序(无运行时错误)

如下面的屏幕快照所示,我只是从可绘制的xml文件中删除以下行
xml <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
我不会改变风格。 Drawable与AppCompat中使用的相同,并且样式相同,但是不会触发运行时错误

我将尝试明天发布拉取请求

非常感谢sunnylqm与我合作编写了https://github.com/facebook/react-native/pull/29452 ,它解决了这个问题。

即使您检查了常量状态,在某些设备/ android os版本中Drawable.mutate()似乎还是有一个错误。 很难重现和修复此错误,因此请尝试捕获异常以防止崩溃。

此问题是由extras / android / support / v7 / appcompat / res / drawable / abc_edit_text_material.xml中的这一行引起的。

<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

上一行创建了一个StateListDrawable ,它将根据TextInput的状态来更改TextInput背景图片(Background Drawable )。

state_pressed="false"state_focused="false"将触发TextInput BackgroundDrawable的更改。 图像不是问题的原因,但是出于文档目的,我将其包括在内。

| abc_textfield_activated_mtrl_alpha | abc_textfield_default_mtrl_alpha |
|:-------------------------:|:-------------------- -----:|
| | |

DrawableContainer.getChild()中, ConstantState变量csnull 。 调用null.newDrawable(mSourceRes)会触发Null指针异常。 该调用是TextInput的状态更改的结果,在按下后在此堆栈跟踪中

mDrawableFutures不包含正确的条目列表https://github.com/facebook/react-native/pull/29452#issuecomment -662616018。

final ConstantState cs = mDrawableFutures.valueAt(keyIndex);
final Drawable prepared = prepareDrawable(cs.newDrawable(mSourceRes));

先前评论中的更多信息https://github.com/facebook/react-native/issues/17530#issuecomment -661174770 https://github.com/facebook/react-native/issues/17530#issuecomment -660908150 https: //github.com/facebook/react-native/issues/17530#issuecomment -660506001 https://github.com/facebook/react-native/issues/17530#issuecomment -660458191 https://github.com/facebook/ react-native / issues / 17530#issuecomment -660017858 https://github.com/facebook/react-native/issues/17530#issuecomment -659422298 https://github.com/facebook/react-native/issues/17530# issuecomment -645851033 https://github.com/facebook/react-native/issues/17530#issuecomment -632795323

非常感谢
祝你美好的一天
法布里佐

@ fabriziobertoglio1987上面的评论是一个变通办法还是需要添加以响应本机的实际可实现的修补程序,我们目前使用的是RN 0.59.3,并且仅在生产使用中出现此错误。 我们似乎无法在开发中复制。

@Coffeegerm上面的评论https://github.com/facebook/react-native/issues/17530#issuecomment -662000718是对我的拉取请求的简要说明https://github.com/facebook/react-native/pull / 29452解决了此问题。 一旦拉取请求在react-native中合并

1)新应用不会出现此错误
2)现有应用程序将升级,并且不会遇到该错误。 阅读有关在upgrade#3-upgrade-your-project-files中进行/android文件夹中的更改的更多信息。

如果您不想升级,则可以检查我的PR https://github.com/facebook/react-native/pull/29452并将这些更改添加到项目android文件夹中。 您不需要对react-native源代码进行更改,因为从此PR进行的配置更改不在/ReactAndroid Java代码库中,而是在用于初始化的Android模板中该项目。

我目前正在处理其他问题,但我会回来,回复所有反馈并对我的请求请求进行必要的改进。

如果有任何改进和反馈的建议,请再次与我联系。

祝你周末愉快
非常感谢你的帮助
法布里佐

刚刚看到了听起来很相关的提交https://github.com/facebook/react-native/commit/1e4d8d902daca8e524ba67fc3c1f4b77698c4d08

我们严格地生成了太多的Create + Delete操作,这些操作是多余的,并且可能会在无法正常处理的平台上导致一致性问题,崩溃或错误-
尤其是因为不能保证Create + Delete的顺序(可以先创建一个重新创建的视图,然后不同的视图随后可以为同一视图发出“删除”)。

@ fabriziobertoglio1987

任何人在使用Expo时如何解决此问题的想法,因此都无法访问项目的android文件夹? 😅

@divonelnc有一种解决方法:每次呈现

<TextInput key={Math.random()} />

当然,这可能会导致其他问题和性能损失。

@sunnylqm不幸的是,这没有帮助😞。 我仍然在随机输入数十个文本的情况下使它在屏幕上崩溃。

我可以在生产中确认此问题! RN:0.62.2😕

RN 0.63.2中发生了相同的问题:(

哇,这真令人沮丧。 @WilliamAlexander @Hopding解决方案有效。 我知道,因为我可以每次都进行复制。
// styles.xml

<resources>
   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
        <item name="android:editTextBackground"><strong i="9">@android</strong>:color/transparent</item>

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="10">@android</strong>:color/transparent</item>
    </style>
</resources>

这是一个很好的解决方法。 为您正在使用的任何文本输入组件做一个包装,并使用useMemo为它生成一个密钥。 这样,单个文本输入将通过重新渲染始终具有相同的键,并且您也不必为所有文本输入编写键。

export default (props: TextInputProps) => {
  const key = useMemo(() => {
    return Math.random().toString()
  }, [])

  return (
    <TextInput key={key} {...props} />
  )
}

如果您正在使用博览会
从expo SDK 38升级到39后出现此错误。
我必须同时清理我的expo缓存(expo -rc)+ expo移动应用程序缓存(为了确定我已卸载并重新安装它),错误消失了。

@dpnick该错误很难重现。 我建议使用我在此处发布的测试组件以确保它确实消失了。

在生产中遇到此错误,我无法重现此问题,我的RN版本是0.62.2,这是我从firebase crashlytics获得的日志:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:880)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1163)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:434)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:259)
       at android.view.View.computeOpaqueFlags(View.java:19424)
       at android.view.View.setBackgroundDrawable(View.java:24701)
       at android.view.View.setBackground(View.java:24594)
       at android.view.View.<init>(View.java:6191)
       at android.widget.TextView.<init>(TextView.java:1223)
       at android.widget.EditText.<init>(EditText.java:106)
       at android.widget.EditText.<init>(EditText.java:102)
       at android.widget.EditText.<init>(EditText.java:98)
       at android.widget.EditText.<init>(EditText.java:94)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.createInternalEditText(ReactTextInputShadowNode.java:258)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext(ReactTextInputShadowNode.java:78)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:243)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:469)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:883)
       at android.os.Handler.dispatchMessage(Handler.java:100)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loop(Looper.java:237)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
       at java.lang.Thread.run(Thread.java:919)

@AbdelkhalekESI该错误很难重现。 您是否尝试过我在此处发布的测试组件?

我写了一个拉取请求来解决此问题https://github.com/facebook/react-native/issues/17530#issuecomment -663577143

请前往PR https://github.com/facebook/react-native/pull/29452,按照说明https://github.com/facebook/react-native/wiki/Building-from-source#publish-您自己的本机版本,如果您需要任何帮助,请告诉我。 我将尝试在本周末检查是否需要为Expo编写一个单独的PR,但是我相信,只要此PR合并并发布,他们就可以通过升级reactnative来解决问题。 非常感谢。 祝你有个美好的夜晚

我以前的帖子中提供了更多信息https://github.com/facebook/react-native/issues/17530#issuecomment -662000718

版本"react-native": "0.63.3"相同问题

只需清除移动应用程序中的Expo缓存(如果使用移动应用程序),或在使用的任何平台上清除Expo应用程序的缓存。

@ tzeneng96好的,清除缓存适用于该应用程序,但这不是可接受的解决方案,因为问题再次发生!

@AbdelkhalekESI该错误很难重现。 您是否尝试过我在此处发布的测试组件?

我能够使用此组件重现此错误。 我还收到了很多有关此生产崩溃的日志。 目前该项目的版本为0.63.3。

我不知道我是否理解错了,但是在@ glenn-axsy引用的这个主题中,据我了解,他们设法通过添加andoid \ app \ src \ main \ res \ values \ styles.xml来解决该项目:
“商品名称=” android:editTextBackground“> @ android:color / transparent / item”

我仍在测试解决方案。

@thiagocristianno您的理解是正确的,尽管它不是一个完美的解决方案,并且我相信它不能帮助Expo开发人员,因为他们无法控制该设置。

哇,这真令人沮丧。 @WilliamAlexander @Hopding解决方案有效。 我知道,因为我可以每次都进行复制。
// styles.xml

<resources>
   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
        <item name="android:editTextBackground"><strong i="10">@android</strong>:color/transparent</item>

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="11">@android</strong>:color/transparent</item>
    </style>
</resources>

@ @jordangrant ,您在哪里看到解决方法?

哇,这真令人沮丧。 @WilliamAlexander @Hopding解决方案有效。 我知道,因为我可以每次都进行复制。
// styles.xml

<resources>
   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
        <item name="android:editTextBackground"><strong i="11">@android</strong>:color/transparent</item>

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="12">@android</strong>:color/transparent</item>
    </style>
</resources>

@ @jordangrant ,您在哪里看到解决方法?

@bobowinca这是一个非常长的线程,该解决方案100%为我工作。 RN 63.3没有博览会

Screen Shot 2020-11-18 at 1 18 45 PM

@jordangrant

听起来您也能够始终如一地重现该问题。 我想知道你是怎么做到的。 到目前为止,我只看到了堆栈跟踪。 我正在寻找验证此修复程序的方法。

@bobowinca我在这里发布的测试组件应该可以帮助您一致地重现它。

@bobowinca我在这里发布的测试组件应该可以帮助您一致地重现它。

奇迹般有效! 谢谢格伦!

<item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item>到styles.xml可以正常工作!
添加到TextInput的key={Math.random().string()}方法可以正常工作,但是重新渲染会导致每秒隐藏一次键盘-这是不可接受的。

此页面是否有帮助?
0 / 5 - 0 等级