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 애널리틱스에서 수집 되었기 때문에이 스택 추적을 제외하고이 예외에 대한 추가 정보를 제공 할 수 없어서 죄송합니다.이 예외가 다시 나타날지 모르겠습니다.

환경

환경:
운영체제 : macOS Sierra 10.12.6
노드 : 8.4.0
털실 : 0.27.5
npm : 5.4.0
안드로이드 스튜디오 : 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) 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)

Bug Android Ran Commands

가장 유용한 댓글

이 문제로 인해 프로덕션에서도 앱이 충돌했습니다. 재현하기가 정말 어렵 기 때문에 끔찍한 버그입니다. 우리는 우리 앱에 대한 유망한 해결책을 찾았으며, 다른 사람들의 시간과 좌절을 덜어주기 위해 우리의 발견을 여기에서 공유하고 싶습니다.

사양 및 버전

이 버그로 인해 삼성, Google 및 LG Android 기기에서 앱이 충돌했습니다. 다음 Android 버전의 오류 보고서가 있습니다.

  • 8.0.0
  • 8.1.0
  • 7.1.1

앱이 실행 중입니다.

  • react-native : 0.53.0
  • react : 16.2.0

충돌의 원인

이 스레드에서 다른 사람들이 언급 한 것처럼 문제는 TextInput , FlatListScrollView 구성 요소의 일부 조합을 렌더링하여 발생하는 것으로 보입니다. 우리의 경우 FlatList 위에 렌더링 된 단일 TextInput 포함 된 화면이 있습니다. FlatList 의 항목 중 하나를 탭하면 앱이 양식이 포함 된 새 화면으로 이동합니다. 이 양식의 루트 구성 요소는 여러 TextInput 구성 요소 (일부 단추 및 기타 사용자 지정 구성 요소 포함)가 포함 된 ScrollView 입니다. 사용자가 이러한 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 prop을 설정하려고 할 때 발생합니다 (따라서 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 구성 요소에서 밑줄을 제거하려면이 소품을 설정해야했습니다. 그러나 우리가 발견 한 바에 따르면, 그것의 prop 핸들러는 때때로 앱을 충돌시키는 안드로이드 버그를 유발하는 것처럼 보였습니다.

다행히도 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

같은 문제

같은 문제. 동일한 logtrace

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 네이티브 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 및 android 8입니다.이 오류가 무작위로 나타나는 것 같습니다. 재현 할 정확한 단계를 찾을 수 없습니다.

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

"종속성": {
"반응": "16.3.1",
"반응 네이티브": "0.55.1",
"반응 네이티브 선형 그래디언트": "^ 2.4.0",
"반응 네이티브 벡터 아이콘": "^ 4.6.0",
"react-navigation": "^ 1.5.11"
},

null 개체 참조에서 가상 메서드 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)'호출 시도
createAllFutures
DrawableContainer. 자바 : 875
getOpacity
DrawableContainer. 자바 : 1158
getOpacity
DrawableContainer. 자바 : 433
getOpacity
InsetDrawable. 자바 : 258
computeOpaqueFlags
전망. 자바 : 15698
setBackgroundDrawable
전망. 자바 : 20502
setBackground
전망. 자바 : 20395

전망. 자바 : 5238

TextView. 자바 : 826

EditText. 자바 : 88

EditText. 자바 : 84

EditText. 자바 : 80

EditText. 자바 : 76
setThemedContext
ReactTextInputShadowNode. 자바 : 80
createView
UIImplementation. 자바 : 282
createView
UIManagerModule. 자바 : 366
호출
Method.java
호출
JavaMethodWrapper. 자바 : 372
호출
JavaModuleWrapper. 자바 : 160
운영
NativeRunnable.java
handleCallback
매니저. 자바 : 790
dispatchMessage
매니저. 자바 : 99
dispatchMessage
MessageQueueThreadHandler. 자바 : 29
고리
자벌레. 자바 : 164
운영
MessageQueueThreadImpl. 자바 : 192
운영
실. 자바 : 764

같은 문제

package.json
"종속성": {
"반응": "16.3.1",
"반응 네이티브": "0.55.2",
},

build.gradle
compileSdk 버전 26
buildToolsVersion "26.0.2"
minSdk 버전 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)

안드로이드 : 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 수와 직접적으로 관련이 없을 가능성이 높습니다. 내 현재 응용 프로그램에서 이것을 시도하고 시작 화면에 수백 개의 TextInput을 추가하면이 오류가 발생했지만 다른 요소에 래핑 된 비슷한 양의 TextInput이있는 다른 뷰는 내 응용 프로그램에 일부가 있기 때문에 항상이 오류를 유발하지 않는 것 같습니다. .

나는 같은 문제가 있습니다. Android 8.0.0이 설치된 Huawei P10에서 이것을 실행했습니다.
"react": "^16.2.0", "react-native": "^0.55.0",
스크린 샷

문제가 TextInputs에있는 것 같습니다. 이것은 Huawei P10 (Android 8.0.0)에서 발생합니다. 이미 이에 대한 수정 사항이 있습니까?

안드로이드 : 7.1.1
"반응 네이티브": "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 다시 실행했습니다. 문제가 사라졌습니다. 정말 이상합니다. 깨끗한 빌드가이 문제를 해결할 수 있기를 바랍니다.

이 같은 문제가 있습니다. 한 가지 작은 차이점은 VirtualizedList (FlatList의 부모) 내부에 TextInputs를 중첩하고 있으며 해당 목록에서 스크롤을 시작할 때만 문제가 발생합니다. 다른 사람들과 마찬가지로 이것은 프로덕션 환경에서 발생하므로 패키지 프로그램을 다시 시작하는 것은 옵션이 아닙니다.

몇 가지 조사에 따르면 Android 자체의 이전 문제와 관련된 것으로 보입니다. https://issuetracker.google.com/issues/37068452
이것이 근본적인 문제인 경우 compileSdk를 업그레이드하고 RN 프로젝트에서 라이브러리 버전을 지원하면 문제가 해결됩니다. 그래도 LoE는 알 수 없습니다.

업데이트 : 하위 프로젝트가 빌드 도구의 상위 버전을 사용하도록 강제하려고 시도하고 compileSdk는 이 SO 게시물에 설명 된대로 내 프로젝트에서이 문제를 해결하지 못했습니다. 상위 버전을 잘못 적용했는지, 빌드 설정이 RN을 그런 방식으로 하위 프로젝트로 취급하지 않는지, 또는 실제로 문제에 대한 유효한 솔루션이 아닌지 확실하지 않습니다.

편집 2 : ReactEditText 는 지원 라이브러리 버전의 EditText (AppCompatEditText)를 사용하지 않는 것으로 보입니다. 이는 지원 라이브러리를 업그레이드해도 아무것도하지 않은 이유를 설명합니다. 나는 이것을 조사하고 있습니다-이것이 작동하도록 상속을 변경하는 것보다 몇 가지 업데이트가 더 필요할 것이지만이 문제에 대한 올바른 해결책이 될 수 있습니다.

편집 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, fwiw에 TextField가없는 것이 확실합니다. 이것은 프로덕션 빌드에서 일어나고 있습니다.

v0.55.4 에서이 문제를 확인합니다. 그리고 예, 우리는 목록에서 TextInput 를 사용하고 있습니다.

2018-06-13_23-04-20_scrot

반응 0.55에서 발생합니다. 수행원

또한 플랫 목록의 입력을 사용하여 반응 네이티브 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 : null 객체 참조에서 가상 메서드 '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)

여기서 문제가되는 것 같습니까?
몇 가지 조사를 시도했습니다.
-순수 안드로이드 앱에서 1000 개 이상의 편집 텍스트 작업
-여기에서 확인 된대로 약 200 개의 ReactTextInput이 실패합니다.

  • 이 문제에 대한 일부 분석 결과 SparseArray에서 깨어 난 흥미로운 멀티 스레딩 시나리오가 밝혀졌습니다.
    -SparseArray는 스레드 세이프가 아니며 동시에 내부에 gc () 로직이 있습니다.
    -DrawableContainerState에는 SparseArray가 사용되며, 복제를 통해 기존 상수 상태의 드로어 블 Future (SparseArray)를 사용하여 새로운 DrawableContainerState를 생성 할 수 있습니다.
    -위는 다중 스레드 nullpointer 예외에 대한 레시피이며 다음과 같이 발생합니다.
    -React Edit Text 섀도 노드 생성 작업을 수행하는 네이티브 모듈 스레드와 그 수명주기가 새로운 EditText (reactthemedcontext)를 수행하여 배경 드로어 블을 설정하고 마지막으로 SparseArray 스레드 안전하지 않은 코드를 호출합니다.
    -한편 UI 스레드는 동일한 SparseArray 스레드의 안전하지 않은 코드로 이어지는 동시에 다른 RTI의 디스플레이 EditText를 만드는 데 사용될 수 있습니다.
    -Nullpointer 예외는 gc ()가 호출되고 동시에 복제 (이 복제는 Drawable * 클래스에서 내부적으로 발생)가 부분적으로 gc-ed 개체를 생성하는 동일한 개체에 대해 수행 될 때 발생합니다. 값 배열의 항목과 같은 항목이 제거되고 null로 지정되었지만 noOfItems 플래그는 아직 업데이트되지 않았으므로 복제 된 개체에는 noOfItems 플래그에 지정된 항목보다 하나 적은 항목이 있으며 반복은 삭제 된 인덱스에 대해 null 포인터 예외를 유발할 수 있습니다.

어떻게 해결하거나 작동하게 만들었습니까?
[1] UI 스레드에서 새 EditText (context) 호출도 이동하고 ShadowNode 비동기를 측정했지만이 EditText 개체가 UI 스레드에서 생성 될 때까지 기다립니다. 기본적으로 그림자 노드 setThemedContext 및 측정 함수를 다시 작성했습니다.
단점 : 모든 RTI에 대한 스레드 스위치

[2] 네이티브 모듈에서 레이아웃 인플레이터를 사용하여 EditText를 생성하고 배경에 null을 지정하고 UI 스레드에서 EditText를 생성하고 shadowNode 수준에서 배경 드로어 블을 캐싱하여 배경 드로어 블을 한 번만 생성합니다. 이 드로어 블은 레이아웃 인플레이터를 사용하여 생성 된 dummyEditText의 배경을 설정하여 측정 값이 드로어 블 경계선 패딩을 고려하도록하는 데 사용됩니다. 이 경우 측정은 Drawable 생성을 한 번만 기다려야합니다.

나는 둘 다 테스트했으며 1024 ReactTextInput에서 잘 작동합니다.

참고 : 조사에 따르면이 방법은 가장 우아한 해결책은 아니지만 최소한의 변경으로 작동하며 문제의 분석을 입증합니다.

제안과 비판을 환영합니다!

섀도우 노드 코드 :

`패키지.richtextinput;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.EditText;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.uimanager.Spacing;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.UIViewOperationQueue;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.text.ReactBaseTextShadowNode;
import com.facebook.react.views.text.ReactTextUpdate;
import com.facebook.react.views.textinput.ReactTextInputLocalData;
import com.facebook.react.views.view.MeasureUtil;
import com.facebook.yoga.YogaMeasureFunction;
import com.facebook.yoga.YogaMeasureMode;
import com.facebook.yoga.YogaMeasureOutput;
import com.facebook.yoga.YogaNode;
수입.아르 자형;

import javax.annotation.Nullable;
// 참고 :이 클래스는 다음의 메커니즘에서 예상하는 ReactTextInputShadowNode와 크게 다르지 않습니다.
// 테마 컨텍스트 설정 및 측정 수행
공용 클래스 ReactTextInputShadowNode는 ReactBaseTextShadowNode를 확장하여 YogaMeasureFunction을 구현합니다.
{
안녕하세요.
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 코드와 더미 편집 텍스트를 부 풀리는 데 사용되는 레이아웃을 포함하도록 마지막 주석을 업데이트했습니다.

@sayantanbugs- 대단한 🕵️ 작업입니다! 우리는 우리 프로젝트에서 그것을 시도하고보고 할 것입니다! 감사!

같은 문제
ReactNative : 0.55.4
안드로이드 : 8.0

@sayantanbugs diff / 패치를 제공 할 수 있습니까?

같은 문제. 다른 세부 정보없이 Crashlytics를 통해보고되므로 문제를 해결하기가 정말 어렵습니다.

RN 55.3
안드로이드 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 파일을 찾고 그가 제공 한 코드를 그의 게시물로 바꾸십시오. 당신은 즐겁게 놀라게 될 것입니다.

1 주일 후 오류가 한 번만 발생했다고보고하게되어 기쁩니다. 하지만 이번에는 달랐습니다 .. 저는 react-native run-android 를 통해 앱을 다시 설치할 필요없이 앱을 다시 시작하고 정상적으로 작동하도록 할 수있었습니다. 그 TextInputs를 렌더링했습니다. 오류가 다시 나타나면 계속 메모 할 것이지만 지금까지는 거의 완벽하게 작동한다고 생각합니다. 훌륭한 디버깅, @sayantanbugs!

@ Friendly-Robot imo는 해결책이 아닙니다. 기껏해야 해결 방법입니다. 이것은 테스트되지 않은 솔루션을 패치 할 수없는 프로덕션 코드에서 발생합니다.

개발자에게 성가 시다면 반드시. 그러나 사람들이 그것을 해결책으로 사용하도록 동기를 부여하는 것은 현명하지 않다고 생각합니다. 아마도 PR의 기초가 될 것입니다.

@ 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를 수정하여 항상 new EditText ()를 수행하지만 해당 호출을 UIthread로 이동하여 어쨌든 드로어 블을 처리하지 않을 수 있습니다. 그것은 확실히 그것을 고칠 것입니다. Shadow 노드의 실제 목적이 단순히 배경의 테두리 패딩을 얻는 것이었지만 RN이 사용하는 메커니즘이 그렇게 작동하지 않고 부작용이있을 때 스레드를 전환하는 비효율적 인 방법이므로 그렇게하고 싶지 않았습니다.
이것은 우리가 측정 함수를 사용하는 것 이외의이 시점에서 사용되는 방식으로 EditText 객체가 필요하지 않도록 ShadowNode를 스스로 다시 작성할 수 있다고 생각하게합니다.

나에게도 일어난다. ScrollView를 사용하고 있습니다.
스크롤 뷰에 다양한 컨트롤 (라디오, 목록, 편집 텍스트 등)이 있습니다. 최대 10 개의 컨트롤이 있으므로 큰 목록은 아닙니다.
그래도 재현하기는 어렵습니다. 임의의 시간에 발생하는 것 같지만 화면에 ScrollView가있을 때 (edittext 컨트롤 포함) 백그라운드에서 앱을 전경으로 가져 오는 것으로 추적하고 있다고 생각합니다.
하지만 100 % 확실하지는 않습니다.
Android 지원 lib 버전과 관련이 있는지 궁금합니다.

FB에서이 버그를 수정하세요.
이와 같은 무작위 충돌이 발생하면 프로덕션 품질의 앱을 만들기가 어렵습니다.

com.facebook.react.views.textinput.ReactEditText
RN 0.54
안드로이드 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() 의 두 번째 경로로 인한 예외를 포착 할 수 있습니다.

더 어려운 부분은 초기화 오류를 수정하는 것입니다. 이를 위해 EditText.setBackground() 로 전달되는 모든 드로어 블을 래핑하는 데 사용할 수있는 "Drawable Wrapper"클래스를 만들어야합니다. 이 래퍼는 대리자에서 throw되는 예외를 포착해야합니다.

이 문제는 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에 대한 해결 방법이 있습니까?

FlatList of TextInputs 😞에서도 무작위로 동일한 문제가 발생합니다.

  • 반응 네이티브 : 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 반응 네이티브 요소를 1.0xx 베타로 업데이트

판독
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 솔루션이 작동 했습니까?

@xstreamcl 내가 게시 한 솔루션은 지금까지 작동하고 있습니다. 2 주 넘게 문제를 보지 못했습니다.
그래도 더 많은 테스트가 필요합니다.)

이 문제로 인해 프로덕션에서도 앱이 충돌했습니다. 재현하기가 정말 어렵 기 때문에 끔찍한 버그입니다. 우리는 우리 앱에 대한 유망한 해결책을 찾았으며, 다른 사람들의 시간과 좌절을 덜어주기 위해 우리의 발견을 여기에서 공유하고 싶습니다.

사양 및 버전

이 버그로 인해 삼성, Google 및 LG Android 기기에서 앱이 충돌했습니다. 다음 Android 버전의 오류 보고서가 있습니다.

  • 8.0.0
  • 8.1.0
  • 7.1.1

앱이 실행 중입니다.

  • react-native : 0.53.0
  • react : 16.2.0

충돌의 원인

이 스레드에서 다른 사람들이 언급 한 것처럼 문제는 TextInput , FlatListScrollView 구성 요소의 일부 조합을 렌더링하여 발생하는 것으로 보입니다. 우리의 경우 FlatList 위에 렌더링 된 단일 TextInput 포함 된 화면이 있습니다. FlatList 의 항목 중 하나를 탭하면 앱이 양식이 포함 된 새 화면으로 이동합니다. 이 양식의 루트 구성 요소는 여러 TextInput 구성 요소 (일부 단추 및 기타 사용자 지정 구성 요소 포함)가 포함 된 ScrollView 입니다. 사용자가 이러한 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 prop을 설정하려고 할 때 발생합니다 (따라서 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 구성 요소에서 밑줄을 제거하려면이 소품을 설정해야했습니다. 그러나 우리가 발견 한 바에 따르면, 그것의 prop 핸들러는 때때로 앱을 충돌시키는 안드로이드 버그를 유발하는 것처럼 보였습니다.

다행히도 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()setUnderlineColor 또는 setColorTint 과 같은 메서드를 호출 할 수없는 null 값을 반환하기 때문에 발생합니다.

우리의 경우에는 나중에 네이티브 애플리케이션에 설치되는 네이티브 라이브러리를 만들기 위해 react-native 를 사용했기 때문에 최종 앱에 스타일이 있는지 제어 할 수 없습니다. Tho, 적어도 지금 우리는 그 문제를 인식하고 문서를 개선했습니다.)

도움이 되었기를 바랍니다.

@sospedra 귀하의 의견은 의미가 있지만 내 코드를 확인한 결과 appcompat 이미 내 스타일에 존재하는 것으로 나타났습니다. Hopding의 해결 방법을 확인하면 이미 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 설정하지 않았는데도 내 firebase 콘솔에이 로그가 있습니다. 그리고이 문제를 다시 재현하는 방법을 모르겠습니다.

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 to red . 그 외에는 underlineColorAndroid 설정하지도 않습니다.

도움을 주시면 감사하겠습니다.

@mddanishansari rn 0.56 underlineColorAndroid 이 기본적으로 설정되어 있으므로 위에서 언급 한 수정 사항이 필요합니다.

@mddanishansari rn 0.56 underlineColorAndroid 이 기본적으로 설정되어 있으므로 위에서 언급 한 수정 사항이 필요합니다.

감사합니다. 그렇게 빨리 대답하리라고는 생각하지 않았습니다. 문제는 다른 모든 원래 기본 EditText 배경도 투명하여 이상하게 보입니다. 내 앱의 일부 화면도 원래 네이티브 (자바)입니다.

이 문제를 실제로 어떻게 해결할 수 있는지 궁금합니다. 제공된 솔루션은 단순한 해킹입니다. 권리?

안녕하세요. 따라서 underlineColorAndroid를 사용하면 어떻게 든이 충돌이 발생합니다.
그러나 이제는 기본적으로 underlineColorAndroid가 설정됩니다.
이것을 사용하지 않고 styles.xml로 대체하는 방법은 무엇입니까?

문안 인사

누군가에게 도움이 될 경우를 대비하여. 제 경우에는 'borderBottomLeftRadius'에서 나에게 발생한 실제 색상 값 대신 실수로 NaN을 보냈습니다 .iPhone에서만 Android에 문제가 없었습니다.

이 스레드의 솔루션이 나를 위해 작동하지 않습니다. 모든 텍스트 입력에 대해 underlineColorAndroid 을 투명하지 않은 것으로 설정하더라도 ( '#f00' 테스트했습니다), 여전히이 문제가 발생합니다.

나에게 문제는 일관되게 발생하지 않습니다. ScrollView 내에 TextInputs가 많이 있고 화면을 여러 번 열고 닫아야합니다.

오류를 일으키는 것은 투명성이 아니라
반응 네이티브 소품의 네이티브 색상. 거의 모든 사람들이
소품으로 기본 밑줄을 투명하게 만듭니다.

2019 년 2 월 6 일 수요일 오후 10:23 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
Mi 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로 업그레이드 한 후 위와 동일한 스택 추적을 얻었습니다. 심각한 문제가 될까 두렵습니다.

이 문제에 대한 해결책이 있습니까?

@sunnylqm 기본적으로 설정되어 있으므로 underlineColorAndroid 을 null로 설정하는 방법이 있습니까?

트윗 담아 가기
patch-package 와 같은 통해이 줄 을 수동으로 제거해야 합니다 . 그리고 여전히 밑줄을 보이지 않게하려면 일부 xml config 에서 설정해야합니다.
그래서 핵심은 어떤 영웅이 이것을 패치 할 방법을 찾을 때까지 not set any value to underlineColorAndroid anywhere 입니다.

오늘이 오류가 발생했습니다
이전에는 잘 작동하지만 일부 빌드 후에 내 장치에서 오류가 발생했습니다.
이 문제에 대한 해결 방법은 장치에서 응용 프로그램을 제거한 다음 react-native run-android를 통해 응용 프로그램을 다시 설치하는 것입니다.
그 후 문제가 사라졌습니다.

Btw 나는 underlineColorAndroid 소품을 사용하지 않으므로 해당 소품에 대한 값을 설정하거나 설정 해제하면 작동하지 않습니다.

이것은 scrollview 내에서 일부 텍스트 입력을 사용할 때 무작위로 발생합니다. underlineColorAndroid는 항상 사용 되며 기본적으로 설정되어 있습니다.

오늘도 Expo에서 저에게 일어났습니다.

Expo를 사용하는 경우 Expo 서버, 앱 및 Expo 앱을 완전히 닫아야합니다. 그리고 다시 엽니 다.

그렇지 않으면 오류가 사라지지 않습니다.

나에게 엑스포에서 일어났다.

어떤 이유로 백그라운드에 내 앱의 인스턴스가 두 개있었습니다. 메모리에있는 앱을보기 위해 "개요"라는 Android 사각형 버튼을 클릭했을 때이 두 개의 내 앱 인스턴스를 보았습니다. 두 인스턴스를 닫고 앱을 다시 실행했을 때 더 이상이 오류가 표시되지 않았습니다.

그래서 앞서 말했듯이 모든 것을 닫고 다시 실행하면 문제가 해결됩니다.

결과가없는이 오류를 파악하기 위해 3 시간을 보냈고 내 안드로이드 에뮬레이터에 앱을 다시 설치했는데 오류가 사라졌습니다.

여전히이 충돌이 발생하는지 확인하려면 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을 렌더링하는 구성 요소 에이 오류가 있습니다.
빌드 또는 앱을 다시 시작하면 두 번째로 다시 렌더링하면 다시 표시됩니다.

안드로이드 : 9
전화 : 삼성 갤럭시 노트 9
모델 : SM-N960F / DS
반응 네이티브 버전 "0.58.5"

null 개체 참조에서 가상 메서드 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)'호출 시도
createAllFutures
DrawableContainer. 자바 : 875
getOpacity
DrawableContainer. 자바 : 1158
getOpacity
DrawableContainer. 자바 : 433
getOpacity
InsetDrawable. 자바 : 258
computeOpaqueFlags
전망. java : 18165
setBackgroundDrawable
전망. java : 23335
setBackground
전망. 자바 : 23228

전망. 자바 : 5952

TextView. 자바 : 1108

EditText. 자바 : 106

EditText. 자바 : 102

EditText. 자바 : 98

EditText. 자바 : 94
setThemedContext
ReactTextInputShadowNode. 자바 : 73
createView
UIImplementation. 자바 : 288
createView
UIManagerModule. 자바 : 449
호출
Method.java
호출
JavaMethodWrapper. 자바 : 372
호출
JavaModuleWrapper. 자바 : 158
운영
NativeRunnable.java
handleCallback
매니저. 자바 : 873
dispatchMessage
매니저. 자바 : 99
dispatchMessage
MessageQueueThreadHandler. 자바 : 29
고리
자벌레. 자바 : 214
운영
MessageQueueThreadImpl. 자바 : 192
운영
실. 자바 : 764

Samsung Note 8, Android 버전 9 및 React 기본 0.57.0에서도 동일한 문제가 발생합니다.

여기에도 같은 문제가 있습니다. React Native 0.59.0. 앱을 사용할 때 문제가 무작위로 나타납니다. 나타나는 패턴을 볼 수 없습니다. 개발 모드와 프로덕션 모두에서 발생합니다.

이 문제로 인해 프로덕션에서도 앱이 충돌했습니다. 재현하기가 정말 어렵 기 때문에 끔찍한 버그입니다. 우리는 우리 앱에 대한 유망한 해결책을 찾았으며, 다른 사람들의 시간과 좌절을 덜어주기 위해 우리의 발견을 여기에서 공유하고 싶습니다.

사양 및 버전

이 버그로 인해 삼성, Google 및 LG Android 기기에서 앱이 충돌했습니다. 다음 Android 버전의 오류 보고서가 있습니다.

  • 8.0.0
  • 8.1.0
  • 7.1.1

앱이 실행 중입니다.

  • react-native : 0.53.0
  • react : 16.2.0

충돌의 원인

이 스레드에서 다른 사람들이 언급 한 것처럼 문제는 TextInput , FlatListScrollView 구성 요소의 일부 조합을 렌더링하여 발생하는 것으로 보입니다. 우리의 경우 FlatList 위에 렌더링 된 단일 TextInput 포함 된 화면이 있습니다. FlatList 의 항목 중 하나를 탭하면 앱이 양식이 포함 된 새 화면으로 이동합니다. 이 양식의 루트 구성 요소는 여러 TextInput 구성 요소 (일부 단추 및 기타 사용자 지정 구성 요소 포함)가 포함 된 ScrollView 입니다. 사용자가 이러한 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 prop을 설정하려고 할 때 발생합니다 (따라서 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 구성 요소에서 밑줄을 제거하려면이 소품을 설정해야했습니다. 그러나 우리가 발견 한 바에 따르면, 그것의 prop 핸들러는 때때로 앱을 충돌시키는 안드로이드 버그를 유발하는 것처럼 보였습니다.

다행히도 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 prop의 사용을 피하는 것과 관련된 해결 방법 일뿐입니다.

현지에서 문제를 재현 할 수 없었기 때문에 이것이 실제로 작동한다고 확신 할 수는 없습니다. 앞으로 몇 주 안에 앱 업데이트를 통해이 변경 사항을 배포 할 예정입니다. 그 후에는 더 이상 발생하는지 확인하기 위해 잠시 기다려야합니다. 나는 우리의 결과를보고하려고 노력할 것입니다.

이 답답한 문제로 씨름하는 모든 사람들에게 행운을 빕니다! 이게 도움이 되길 바란다.

이 상황을 재현하는 방법을 알고 있습니다. 말한대로 양식을 다시 클릭 한 다음 플랫리스트에서 항목을 클릭하여 양식을 입력하십시오. 약 10 회 정도 반복하면이 오류가 발생합니다. 내가 말한대로 오류를 재현 할 수 있습니다.


이 상황을 재현하는 방법을 알고 있습니다. 말한대로 양식을 다시 클릭 한 다음 플랫리스트에서 항목을 클릭하여 양식을 입력하십시오. 약 10 회 정도 반복하면이 오류가 발생합니다. 내가 말한대로 오류를 재현 할 수 있습니다.


underlineColorAndroid를 제거했지만 재현하겠습니다.

@ react-native-bot이 문제는 매우 중요합니다

RN 59.5를 사용하고 있는데이 문제도 있습니다 ..

null 개체 참조에서 가상 메서드 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)'호출 시도
createAllFutures
DrawableContainer. 자바 : 875
getOpacity
DrawableContainer. 자바 : 1158
getOpacity
DrawableContainer. 자바 : 433
getOpacity
InsetDrawable. 자바 : 258
computeOpaqueFlags
전망. 자바 : 16594
setBackgroundDrawable
전망. 자바 : 21577
setBackground
전망. 자바 : 21470

전망. 자바 : 5498

TextView. 자바 : 875

EditText. 자바 : 88

EditText. 자바 : 84

EditText. 자바 : 80

EditText. 자바 : 76
setThemedContext
ReactTextInputShadowNode. 자바 : 76
createView
UIImplementation. 자바 : 294
createView
UIManagerModule. 자바 : 462
호출
Method.java
호출
JavaMethodWrapper. 자바 : 372
호출
JavaModuleWrapper. 자바 : 158
운영
NativeRunnable.java
handleCallback
매니저. 자바 : 873
dispatchMessage
매니저. 자바 : 99
dispatchMessage
MessageQueueThreadHandler. 자바 : 29
고리
자벌레. 자바 : 193
운영
MessageQueueThreadImpl. 자바 : 232
운영
실. 자바 : 764

누구나 이미이 문제를 해결 했습니까 ?? 나는 RN 52 에서이 문제를 겪고 있으며 56으로 업그레이드했지만 여전히 오류가 있습니다. 나는 그것을 재현하기 위해 단계를 시도했지만 할 수 없습니다. 일부 장치는 여전히 이것을 무작위로 실행합니다.

이 문제에 행운이 있습니까?

나는이 문제 RN 0.59.5를 얻습니다.

이 문제로 인해 프로덕션에서도 앱이 충돌했습니다. 재현하기가 정말 어렵 기 때문에 끔찍한 버그입니다. 우리는 우리 앱에 대한 유망한 해결책을 찾았으며, 다른 사람들의 시간과 좌절을 덜어주기 위해 우리의 발견을 여기에서 공유하고 싶습니다.

사양 및 버전

이 버그로 인해 삼성, Google 및 LG Android 기기에서 앱이 충돌했습니다. 다음 Android 버전의 오류 보고서가 있습니다.

  • 8.0.0
  • 8.1.0
  • 7.1.1

앱이 실행 중입니다.

  • react-native : 0.53.0
  • react : 16.2.0

충돌의 원인

이 스레드에서 다른 사람들이 언급 한 것처럼 문제는 TextInput , FlatListScrollView 구성 요소의 일부 조합을 렌더링하여 발생하는 것으로 보입니다. 우리의 경우 FlatList 위에 렌더링 된 단일 TextInput 포함 된 화면이 있습니다. FlatList 의 항목 중 하나를 탭하면 앱이 양식이 포함 된 새 화면으로 이동합니다. 이 양식의 루트 구성 요소는 여러 TextInput 구성 요소 (일부 단추 및 기타 사용자 지정 구성 요소 포함)가 포함 된 ScrollView 입니다. 사용자가 이러한 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 prop을 설정하려고 할 때 발생합니다 (따라서 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 구성 요소에서 밑줄을 제거하려면이 소품을 설정해야했습니다. 그러나 우리가 발견 한 바에 따르면, 그것의 prop 핸들러는 때때로 앱을 충돌시키는 안드로이드 버그를 유발하는 것처럼 보였습니다.
다행히도 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 prop의 사용을 피하는 것과 관련된 해결 방법 일뿐입니다.
현지에서 문제를 재현 할 수 없었기 때문에 이것이 실제로 작동한다고 확신 할 수는 없습니다. 앞으로 몇 주 안에 앱 업데이트를 통해이 변경 사항을 배포 할 예정입니다. 그 후에는 더 이상 발생하는지 확인하기 위해 잠시 기다려야합니다. 나는 우리의 결과를보고하려고 노력할 것입니다.
이 답답한 문제로 씨름하는 모든 사람들에게 행운을 빕니다! 이게 도움이 되길 바란다.

이 상황을 재현하는 방법을 알고 있습니다. 말한대로 양식을 다시 클릭 한 다음 플랫리스트에서 항목을 클릭하여 양식을 입력하십시오. 약 10 회 정도 반복하면이 오류가 발생합니다. 내가 말한대로 오류를 재현 할 수 있습니다.

이 문제가 해결 된 것 같습니다.

재현 방법을 궁금해하는 사람들을 위해 : <ScrollView ...> 100 <TextInput ...> 를 추가하여 재현했습니다. 그 시점에서 우리는 대략 75 % -90 %의 성공률로 오류를 재현 할 수있었습니다. 솔루션을 시도하기에 충분합니다. 50 개의 필드는 충분하지 않았습니다.

@Hopding해결 방법 이 우리에게 효과적이었습니다 . 제안 된 대체 "색조"솔루션 (다른 사용자)이 작동하지 않습니다. 해결 방법의 불행한 부작용은 텍스트 입력에서 패딩이 제거된다는 것입니다.

여기도 마찬가지입니다.

치명적인 예외 : java.lang.NullPointerException : null 객체 참조에서 가상 메서드 '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://www.youtube.com/watch?v=FJ6YvXrevMQ&feature=youtu.be

솔루션 PLZ.

이 문제는 2018 년 1 월 11 일에 열렸고 지금은 2019 년 5 월인데, 공식 팀의 누구도이 문제를 다루지 않는 이유는 무엇입니까?
참고로, 해결 방법이 작동하지 않습니다.

여기도 같음 0.59.6

치명적인 예외 : java.lang.NullPointerException : null 객체 참조에서 가상 메서드 '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 는 null입니다.

내가 찾은 유일한 사용자 정의 드로어 블 클래스는 ReactViewBackgroundDrawable 이며 기본적으로 null을 반환하는 getConstantState 를 구현하지 않았습니다.
나는 그것을 빈 클래스로 재정의하려고 시도했고 그것은 약간의 차이를 만들 수 있습니다 (이 충돌은 다른 것들이 나타나는 동안 사라집니다).

이것이 누군가가 더 많은 것을 파는 데 도움이되기를 바랍니다.

수동 테스트가 매우 적중하고 놓친다는 것을 알게 되었기 때문에 위에서보고 한 일부 시나리오를 자동으로 테스트하는 구성 요소를 작성했습니다. 아래에서 구성 요소를 찾을 수 있습니다. 작업을 수행하려면 어딘가에 렌더링해야합니다.

이렇게하면 @Hopding이 제안한대로 styles.xml의 AppTheme에 다음을 추가하기 만하면됩니다.
<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

다른 것은 필요하지 않았고 underlineColorAndroid 설정을 피할 필요가 없었습니다. 따라서 React Native가 이제 기본적으로 설정하는 것은 중요하지 않습니다.

이 수정의 주요 단점은 패딩 손실을 허용하기 위해 TextInputs의 스타일을 다시 지정해야한다는 것입니다. 또한 실제 밑줄 동작도 손실됩니다. 이는 항상 "투명"으로 설정했기 때문에 이점이었습니다. iOS와 일치합니다. 필요한 경우 onFocusonBlur 를 감시하는 래퍼 구성 요소를 만들고 자신 만의 밑줄을 만들 수 있습니다.

내 React Native 버전은 0.57.3입니다.

내 테스트 구성 요소를 사용하여 찾은 몇 가지 다른 사항은 다음과 같습니다.

  1. 저사양 안드로이드 태블릿 장치에서 전혀 충돌을 일으킬 수 없었습니다. 그러나 Android 7을 실행하는 Samsung S6 Edge 전화에서는 재현하기가 매우 쉬웠습니다. 제 생각에는 그것을 유발하기 위해 더 빠른 장치가 필요한 경쟁 조건이 있다는 것입니다.
  2. 텍스트 입력을 스크롤해도 아무런 차이가 없었고 ScrollView를 사용하지 않고도 문제를 쉽게 재현 할 수있었습니다.
  3. 텍스트를 입력 할 필요가 없습니다. 초점을 변경하는 것만으로도 충돌이 발생했습니다.
  4. undefined 조차도 밑줄을 설정 한 색상에 차이가 없었지만 RN이 이제 기본적으로 "투명"으로 설정했기 때문에 예상 할 수 있습니다.
  5. 한 번에 상당한 수의 TextInputs를 표시하면 화면에 10 개가 아닌 100 개로 더 빨리 충돌이 발생하는 데 차이가있었습니다.
  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 구성 요소를 사용하고 있으며 RN-Paper TextInput에 영향을주지 않고 <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> 를 안전하게 설정할 수 있었고 그 이후로 더 이상 충돌이 발생하지 않았습니다.

0.59.9 에 프로덕션에서보고 있습니다.

Crashlytics :

삼성 Galaxy S7 Edge
안드로이드 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: []
  };
}

나를 위해 문제를 해결했습니다. 상태를 클래스 변수로 설정하는 것이 괜찮아 야하는 이유가 확실하지 않습니까? 누군가?

@wbodron 아니요, 관련이 없습니다. 충돌은 무작위이므로 사라 졌다고 생각할 수 있지만 실제로는 그렇지 않습니다. 그리고 위에서 설명한 요점 https://github.com/facebook/react-native/issues/17530#issuecomment -500865260

cc @cpojer @shergin @sahrens

Android에서 빌드 폴더를 삭제하십시오.
Your_Project> android> app> build

삭제 후 react-native run-android

잘 작동합니다.
나를 위해 일했다 : D

나는 이미 이것을 시도하고 underlineColorAndroid를 제거했지만 여전히 문제가 있습니다. 다른 해결 방법이 있습니까?

이 문제로 인해 프로덕션에서도 앱이 충돌했습니다. 재현하기가 정말 어렵 기 때문에 끔찍한 버그입니다. 우리는 우리 앱에 대한 유망한 해결책을 찾았으며, 다른 사람들의 시간과 좌절을 덜어주기 위해 우리의 발견을 여기에서 공유하고 싶습니다.

사양 및 버전

이 버그로 인해 삼성, Google 및 LG Android 기기에서 앱이 충돌했습니다. 다음 Android 버전의 오류 보고서가 있습니다.

  • 8.0.0
  • 8.1.0
  • 7.1.1

앱이 실행 중입니다.

  • react-native : 0.53.0
  • react : 16.2.0

충돌의 원인

이 스레드에서 다른 사람들이 언급 한 것처럼 문제는 TextInput , FlatListScrollView 구성 요소의 일부 조합을 렌더링하여 발생하는 것으로 보입니다. 우리의 경우 FlatList 위에 렌더링 된 단일 TextInput 포함 된 화면이 있습니다. FlatList 의 항목 중 하나를 탭하면 앱이 양식이 포함 된 새 화면으로 이동합니다. 이 양식의 루트 구성 요소는 여러 TextInput 구성 요소 (일부 단추 및 기타 사용자 지정 구성 요소 포함)가 포함 된 ScrollView 입니다. 사용자가 이러한 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 prop을 설정하려고 할 때 발생합니다 (따라서 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 구성 요소에서 밑줄을 제거하려면이 소품을 설정해야했습니다. 그러나 우리가 발견 한 바에 따르면, 그것의 prop 핸들러는 때때로 앱을 충돌시키는 안드로이드 버그를 유발하는 것처럼 보였습니다.
다행히도 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 prop의 사용을 피하는 것과 관련된 해결 방법 일뿐입니다.
현지에서 문제를 재현 할 수 없었기 때문에 이것이 실제로 작동한다고 확신 할 수는 없습니다. 앞으로 몇 주 안에 앱 업데이트를 통해이 변경 사항을 배포 할 예정입니다. 그 후에는 더 이상 발생하는지 확인하기 위해 잠시 기다려야합니다. 나는 우리의 결과를보고하려고 노력할 것입니다.
이 답답한 문제로 씨름하는 모든 사람들에게 행운을 빕니다! 이게 도움이 되길 바란다.

이 상황을 재현하는 방법을 알고 있습니다. 말한대로 양식을 다시 클릭 한 다음 플랫리스트에서 항목을 클릭하여 양식을 입력하십시오. 약 10 회 정도 반복하면이 오류가 발생합니다. 내가 말한대로 오류를 재현 할 수 있습니다.

어떡해? 메신저 도이 문제에 직면!

여기도 마찬가지입니다. 프로덕션에서 직면

@ jake41 다시 시작하려고 시도했지만 작동했습니다. 다시

@agrass 나는 당신의 방법을 시도 할 것입니다. 유망 해 보인다.
그러나 내 앱은이 원인으로 인해 매우 드물게 충돌합니다. 이 문제로 인해 앱이 매번 충돌합니까? 아니면 가끔?
우리 앱의 DAU는 약 8k이며 이는 대략 하루에 한 번 발생합니다. 따라서 무시할 수 있지만 충돌을 치료할 수 있기를 바랍니다.

누구든지 적절한 작업 수정을 찾았습니까? 매우 드물게 텍스트 필드가있는 구성 요소에서만 발생합니다.

문제는 여전히 React Native 0.60에서 지속됩니다.

네이티브 반응 : 0.59.8
안드로이드 : 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
기기 : Pixel 2
안드로이드 : 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이 비어있을 때 더 이상 내부 패딩을 처리 할 필요가없고 다른 구성 요소를 그 가까이에 배치하려고했기 때문에 실제로 개선 된 것처럼 느꼈습니다.

이전에는 SectionList에 500 개의 TextInput을 추가 한 앱에 추가 한 진단 버튼을 통해 오류를 안정적으로 트리거 할 수있었습니다. 내 경험상 첫 번째 시도에서 60 %, 두 번째 시도에서 90 %, 세 번째 시도에서 100 %를 트리거한다고 말하고 싶습니다. 변경 후 오류없이 10 번 이상 시도했습니다.

여기에 같은 문제가 있습니다.
RN : 0.55.4
장치 : MI 8 Lite
안드로이드 : 8.1.0

java.lang.NullPointerException : null 객체 참조에서 가상 메소드 '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)'호출 시도

생체 1804
Android 버전 : 9

나를 위해 일어나고 있습니다. Android 9에서 실행되는 React Native 버전 0.60.4는 매우 간헐적이며 드물지만.

나를 위해 일어나고 있습니다. Android 9에서 실행되는 React Native 버전 0.60.4는 매우 간헐적이며 드물지만.

저도 마찬가지입니다 ...

여기도 마찬가지입니다. Android 9의 React Native 0.60.4

Expo와 함께 React Native를 사용하는데 오늘 아침에이 문제가 발생했습니다.
먼저이 줄을 내 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. 같은 오류. 해결책이 있습니까? 누군가 빌드 폴더 삭제를 제안했지만 null 포인터와 어떤 관련이 있는지 알 수 없습니까? 해결책은 항상 재 구축 / 재실행 인 것 같습니다.

@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 속성을 제거하고이 줄을 내부의 styles.xml에 추가하여이 문제를 해결했습니다 (android / src / main / res / values ​​/ styles.xml).

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

버그 신고입니까?

기여 가이드 라인 을 읽었습니까?

예, 충돌 보고서가 Google 애널리틱스에서 수집 되었기 때문에이 스택 추적을 제외하고이 예외에 대한 추가 정보를 제공 할 수 없어서 죄송합니다.이 예외가 다시 나타날지 모르겠습니다.

환경

환경:
운영체제 : macOS Sierra 10.12.6
노드 : 8.4.0
털실 : 0.27.5
npm : 5.4.0
안드로이드 스튜디오 : 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) 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)

반응 네이티브 0.60.4 나도

최근이 크래시가 발생하기 시작했습니다. 주로 Android 8/9에서 RN 0.60.5입니다 (아마도 10 개도 아직 광범위하게 테스트하지 않았 음).

https://github.com/facebook/react-native/issues/17530#issuecomment -504044357이 나를 위해 트릭을 수행하는 것 같습니다. 일반적으로 충돌은 테스트 구성 요소가 통과하는 처음 ~ 5 번 반복 내에 나타납니다. 그 한 줄을 추가 한 후 중단하기 전에 충돌없이 ~ 200 번 반복 실행되었습니다.

편집 : 테스트 구성 요소를 사용하여 Android 6에서도 안정적으로 재현 할 수 있지만 제안 된 수정으로 문제가 해결되는 것 같습니다.

RN 0.61에서 동일

안녕하세요, @diegotsi 솔루션이 저에게

이 문제는 여전히 존재하며 내 앱이 망가졌습니다. 가져 오기 호출을 추가 한 것보다 모든 것이 잘 작동했으며 이제 주석을 달아도 앱을 다시 실행할 수 없습니다. : cry : I am using Expo btw

수정 : 내 기기에 엑스포 앱을 다시 설치하여 엑스포 문제를 수정했습니다.

이 오류도 발생했습니다 (RN : 0.61.1, Android 10 api 29). 'npm start --reset-cache'가 수정 된 것처럼 보였습니다.

@johnbowdenatfacet 위의 의견에 제공된 드롭 인 테스트 구성 요소를 사용하여 수정 사항을 확인하는 것이 좋습니다.

같은 문제.

React-Native 0.59.10
기계적 인조 인간

java.lang.NullPointerException : null 객체 참조에서 가상 메소드 '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 속성을 제거하고이 줄을 내부의 styles.xml에 추가하여이 문제를 해결했습니다 (android / src / main / res / values ​​/ 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 통해 엑스포를 다시 실행하여 문제를 해결했습니다.

RN 0.59.10에 대해 동일한 문제보고

수동 테스트가 매우 적중하고 놓친다는 것을 알게 되었기 때문에 위에서보고 한 일부 시나리오를 자동으로 테스트하는 구성 요소를 작성했습니다. 아래에서 구성 요소를 찾을 수 있습니다. 작업을 수행하려면 어딘가에 렌더링해야합니다.

이렇게하면 @Hopding이 제안한대로 styles.xml의 AppTheme에 다음을 추가하기 만하면됩니다.
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

다른 것은 필요하지 않았고 underlineColorAndroid 설정을 피할 필요가 없었습니다. 따라서 React Native가 이제 기본적으로 설정하는 것은 중요하지 않습니다.

이 수정의 주요 단점은 패딩 손실을 허용하기 위해 TextInputs의 스타일을 다시 지정해야한다는 것입니다. 또한 실제 밑줄 동작도 손실됩니다. 이는 항상 "투명"으로 설정했기 때문에 이점이었습니다. iOS와 일치합니다. 필요한 경우 onFocusonBlur 를 감시하는 래퍼 구성 요소를 만들고 자신 만의 밑줄을 만들 수 있습니다.

내 React Native 버전은 0.57.3입니다.

내 테스트 구성 요소를 사용하여 찾은 몇 가지 다른 사항은 다음과 같습니다.

  1. 저사양 안드로이드 태블릿 장치에서 전혀 충돌을 일으킬 수 없었습니다. 그러나 Android 7을 실행하는 Samsung S6 Edge 전화에서는 재현하기가 매우 쉬웠습니다. 제 생각에는 그것을 유발하기 위해 더 빠른 장치가 필요한 경쟁 조건이 있다는 것입니다.
  2. 텍스트 입력을 스크롤해도 아무런 차이가 없었고 ScrollView를 사용하지 않고도 문제를 쉽게 재현 할 수있었습니다.
  3. 텍스트를 입력 할 필요가 없습니다. 초점을 변경하는 것만으로도 충돌이 발생했습니다.
  4. undefined 조차도 밑줄을 설정 한 색상에 차이가 없었지만 RN이 이제 기본적으로 "투명"으로 설정했기 때문에 예상 할 수 있습니다.
  5. 한 번에 상당한 수의 TextInputs를 표시하면 화면에 10 개가 아닌 100 개로 더 빨리 충돌이 발생하는 데 차이가있었습니다.
  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 있는 구성 요소에서 임의로 발생합니다.

이 스레드에서 설명한대로 TextInputunderlineColorAndroid={null} atrribute를 설정하려고했지만 오류가 계속 발생합니다.

문제를 해결하려면 전화기를 다시 시작하고 EXPO를 다시 설치해야했습니다. 그래도 작동하지 않으면 캐시를 지우고 EXPO 앱 자체의 캐시를 지우려고합니다.

처음에 그 ERROR가 어떻게 발생했는지 전혀 알 수 없습니다. 나는 그것을 재현 할 수 없었고 그것이 다시 일어나는 것을 막을 방법을 찾지 못했습니다.
방금 시작되었고 코드에서 무엇을 변경하더라도 수정되지 않았습니다. APP에는 오류가 표시되지만 콘솔이나 다른 곳에서는 표시되지 않기 때문에 EXPO APP의 문제입니다.

+1 RN 0.59.9에 여전히 오류가 있습니다. Firebase crashlytics에서보고 됨

RN 0.61에서이 오류가 발생하는 첫 번째?

RN 0.61에서 동일한 오류가 발생 했지만 @diegotsi 의 솔루션이 문제를 해결했습니다.
이것은 사전 프로덕션 환경에서 처음 발생했기 때문에 심각한 문제이며, 비정상적인 동작으로 인해 재현하기 어렵 기 때문에 crashlytics 없이는 추적 할 수 없었을 것입니다.

버그 신고입니까?

기여 가이드 라인 을 읽었습니까?

예, 충돌 보고서가 Google 애널리틱스에서 수집 되었기 때문에이 스택 추적을 제외하고이 예외에 대한 추가 정보를 제공 할 수 없어서 죄송합니다.이 예외가 다시 나타날지 모르겠습니다.

환경

환경:
운영체제 : macOS Sierra 10.12.6
노드 : 8.4.0
털실 : 0.27.5
npm : 5.4.0
안드로이드 스튜디오 : 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) 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)

버그 신고입니까?

기여 가이드 라인 을 읽었습니까?

예, 충돌 보고서가 Google 애널리틱스에서 수집 되었기 때문에이 스택 추적을 제외하고이 예외에 대한 추가 정보를 제공 할 수 없어서 죄송합니다.이 예외가 다시 나타날지 모르겠습니다.

환경

환경:
운영체제 : macOS Sierra 10.12.6
노드 : 8.4.0
털실 : 0.27.5
npm : 5.4.0
안드로이드 스튜디오 : 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) 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)

이것은 justifyContent 삭제 또는 이와 같은 smthng와 같은 스타일을 변경하고 앱을 다시 시작하면 일시적으로 작동합니다.

@cinocai , @Sargnec et al,이 댓글 스레드가 너무 길어서 위에 게시

위의 여러 사람들이이 문제를 성공적으로 재현하고 해결 방법을 확인하는 데 사용했습니다.

@ glenn-axsy : 테스트 구성 요소에 대한 훌륭한 작업은 문제를 더 잘 이해하는 데 매우 도움이되었습니다.
그러나 나는 해결책을 찾기 위해 고군분투하고 있습니다.

displayForMs: 0 설정시 제안했듯이 충돌하지 않습니다. 내가 틀린 것이 아니라면 100 TextInputs는 절대 마운트 해제되지 않으며 (업데이트 만) 새로운 것도 없습니다.

나는 displayForMs: 3000 자체를 설정하려고 시도하고 각 세트 상태에서 모든 100 마운트 (업데이트 만)를 유지하는 2 개의 다른 변경을 수행했습니다.

변화

  • const 키 = 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 를 호출하는 두 변경 사항은 TextInputs를 다시 마운트하지도 않고 new (최대 100 개)도 마운트하지 않습니다.
그리고 예상대로 충돌하지 않습니다.

마지막으로 문제를 일으키는 실제로 다시 마운트되는지 (많은 수의 TextInputs) 확인합니다. 작업중인 앱에서이를 재현하려고했는데 충돌이보고되었습니다.

앱에는 2 개의 화면이 있습니다. 하나에는 2 개의 TextInput이 있고 다른 하나에는 4 개의 화면이 있습니다.

이것으로 TextInput 마운트 해제를 허용하지 않는 것은 실행 가능한 해결책이 아니라는 것을 추론 할 수 있습니다. 그러나 이것이 정확히 무엇을 일으키는 지 여전히 모릅니다!

노트

  • <item name="android:editTextBackground"><strong i="18">@android</strong>:color/transparent</item> 재정의를 시도했지만 차이가 없기 때문에 underlineColorAndroid 속성과 관련이 있다고 생각하지 않습니다. [편집 됨 : 현재 문제가 실제로 수정되었습니다.]
  • 또한 ScrollView 를 사용하지 않고도 충돌이 발생할 수있었습니다.
  • 그리고 TextInput 에 집중할 필요도 없었습니다. 단순히 100 TextInputs를 다시 마운트하면 충돌이 발생했습니다.

감사!

@rimzici 네 맞습니다. 충돌은 때때로 배경 드로어 블이 null 인 편집 텍스트를 다시 마운트 / 인스턴스화하는 것과 관련이 있습니다. 하지만 이상하게도 <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://sentry.io/share/issue/ac1e7c55f1594b118f0faaf8d11de5c4/

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 설정을 피할 필요가 없었습니다. 따라서 React Native가 이제 기본적으로 설정하는 것은 중요하지 않습니다.

이 수정의 주요 단점은 패딩 손실을 허용하기 위해 TextInputs의 스타일을 다시 지정해야한다는 것입니다. 또한 실제 밑줄 동작도 손실됩니다. 이는 항상 "투명"으로 설정했기 때문에 이점이었습니다. iOS와 일치합니다. 필요한 경우 onFocusonBlur 를 감시하는 래퍼 구성 요소를 만들고 자신 만의 밑줄을 만들 수 있습니다.

내 React Native 버전은 0.57.3입니다.

내 테스트 구성 요소를 사용하여 찾은 몇 가지 다른 사항은 다음과 같습니다.

  1. 저사양 안드로이드 태블릿 장치에서 전혀 충돌을 일으킬 수 없었습니다. 그러나 Android 7을 실행하는 Samsung S6 Edge 전화에서는 재현하기가 매우 쉬웠습니다. 제 생각에는 그것을 유발하기 위해 더 빠른 장치가 필요한 경쟁 조건이 있다는 것입니다.
  2. 텍스트 입력을 스크롤해도 아무런 차이가 없었고 ScrollView를 사용하지 않고도 문제를 쉽게 재현 할 수있었습니다.
  3. 텍스트를 입력 할 필요가 없습니다. 초점을 변경하는 것만으로도 충돌이 발생했습니다.
  4. undefined 조차도 밑줄을 설정 한 색상에 차이가 없었지만 RN이 이제 기본적으로 "투명"으로 설정했기 때문에 예상 할 수 있습니다.
  5. 한 번에 상당한 수의 TextInputs를 표시하면 화면에 10 개가 아닌 100 개로 더 빨리 충돌이 발생하는 데 차이가있었습니다.
  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 의 수정 은 나를 위해 일했지만 ( 테스트 구성 요소 👏👏👏) 다른 잃어버린 영혼을 도울 수있는 길을 따라 몇 가지 문제가 발생했습니다.

개발자가 스플래시 화면 활동을 추가 할 때 만든 실수로 인해 AndroidManifest.xml 파일에서 내 AppTheme이 부적절하게 재정의되었습니다. AppTheme이 실제로 사용되고 있음을 확인하고 (예 : 기본 텍스트 색상을 변경하고 앱에서 확인하여) 확인한 후 수정이 실제로 작동했습니다.

감사합니다. 행운을 빕니다!

엑스포를 사용하는 나에게 일어난다. 이 명령을 실행합니다.
sudo expo start -c 및 문제가 사라졌습니다.

@HakimAsa 테스트 구성 요소 를 사용하여 실제로 사라 졌는지 확인하는 것이 좋습니다.

그들의 이상한 점은 코드가 그 문제없이 한 달 동안 작동했다는 것입니다. 하지만 변경 사항을 반복적으로 다시로드 한 후 어제 문제가 발생했습니다 ... 어쨌든 귀하의 제안 @ glenn-axsy를 시도해 보겠습니다.

제 경우에는 renderItem<TextInput /> 반환 할 때 FlatList 내에서 멈췄습니다. 그래서 <><TextInput /></> 반환하여 문제를 해결했습니다.

@MahmoudHemaid 문제를 재현하기가 너무 어려워 실제로 해결하지 못했을 수 있습니다. 자세한 정보는 여기 .

android.graphics.drawable.Drawable $ constantstate, newdrawable on a null reference error get while I click an image, placed on the right most corner. 그리고 그 이미지는 토글 버튼처럼 작동했습니다. 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="8">@android</strong>:color/transparent</item>

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

가장 간단한 예는 null AttributeSet 이고 기본 스타일 속성이없는 EditText 를 만드는 것입니다.

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

ReactTextInput 는 자신의 EditText 인스턴스를 제공하고자하는 sublasses에 의해 재정의 될 수 있습니다.

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, 저는이 문제로 몇 시간 동안 어려움을 겪었으므로 정말 당신이 저를 도울 수 있기를 바랍니다. 내 안드로이드 폰에서 AndroidTextInputTest를 사용하고 있습니다. 중요한 경우 Typescript로 React Native를 실행하고 있으며 Expo를 통해 수행합니다. 즉, EditText 유형의 항목이 없다는 것을 의미합니다.
package.json의 React native = "react-native": "^ 0.61.4"

매개 변수를 사용했습니다.

const params = {
underlineColors : [ "red", undefined, "transparent", "rgba (0, 0, 0, 0)"], // 테스트 할 색상
numberOfInputs : 100, // 한 번에 렌더링 할 TextInput 수
focusIntervalMs : 200, // 포커스를 변경하는 빈도
displayForMs : 3000, // 표시 할 시간 (무한한 경우 0으로 설정)
delayDisplayForMs : 10, // 디스플레이 간 지연 시간
withScrollView : false, // ScrollView 사용 여부
};

그리고 "Attempt to invoke virtual method"를 얻기 전의 출력은 다음과 같습니다.

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 = 투명 테스트
underlineColor = rgba (0, 0, 0, 0) 테스트
underlineColor = 빨간색 테스트
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 네이티브를 사용하고 있기 때문에 혼란

다음과 같은 TextInput을 사용합니다.

TextInput
ref = {key}
key = {key}
placeholder = {key}
underlineColorAndroid = {underlineColor}
style = {styles.textInput}

감사합니다

안녕하세요.
image
그러나 엑스포의 경우 이와 같은 설정을 수정하려면 먼저 꺼내야 할 수도 있습니다.

안녕하세요.
image
그러나 엑스포의 경우 이와 같은 설정을 수정하려면 먼저 꺼내야 할 수도 있습니다.

그렇습니다. 그것은 당연히 문제가 될 것입니다. 개발 초기에 React Native 앱을 꺼내는 대가를 지불하고 싶지 않습니다. React Native에서 나를 유지하는 솔루션을 찾고 싶습니다.

당신의 도움을 주셔서 감사합니다

@ axsy-dev @ucheNkadiCode

의견TextInput prop underlineColorAndroid 연결된 문제를 피하기 위해 pull 요청에서이 문제를 해결하기 위해 그 방향으로 작업했습니다. ReactNative는 프로그래밍 방식으로 테마를 설정합니다 ... 제 의견을 검토하고이 문제를 해결할 수 없었고 지금 다른 풀 리퀘스트를 작업 중이므로 피드백을 보내 주시기 바랍니다. 감사

실제로 반응 네이티브 ReactTextInput 메서드를 다시 작성하여이 문제를 해결할 수있었습니다.

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

그러나 이것은 getThemedContext() EditText 구성 요소에 전달 된 스타일을 비활성화하는 것입니다.

또한 스택은 사용자가 TextInput 구성 요소를 터치 할 때이 오류가 ReactEditText.onTouchEvent 에 의해 트리거됨을 알려줍니다.

의견TextInput prop underlineColorAndroid 연결된 문제를 피하기 위해 pull 요청에서이 문제를 해결하기 위해 그 방향으로 작업했습니다. ReactNative는 프로그래밍 방식으로 테마를 설정합니다 ... 제 의견을 검토하고이 문제를 해결할 수없고 다른 풀 요청에 대해 작업 중이므로 피드백을 보내 주시기 바랍니다.

실제로 반응 네이티브 ReactTextInput 메서드를 다시 작성하여이 문제를 해결할 수있었습니다.

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

그러나 이것은 getThemedContext() EditText 구성 요소에 전달 된 스타일을 비활성화하는 것입니다.

또한 스택은 사용자가 TextInput 구성 요소를 터치 할 때이 오류가 ReactEditText.onTouchEvent 에 의해 트리거됨을 알려줍니다.

@ axsy-dev @ fabriziobertoglio1987. 그래서 ReactEditText를 사용하여 프로젝트 디렉터리에서 찾을 수있는 요소가없고 디렉터리에 .java 파일도 없습니다. React native와 함께 TypeScript를 사용하고 있으므로 많은 node_modules를 제외하고 대부분의 파일이 .tsx 또는 .ts입니다.

불행히도 네이티브 Android를 사용하고 있지 않습니다.

@ucheNkadiCode 를 해결하려면 이제 꺼내야합니다. 그렇지 않으면이 시나리오를 reactnative에서 다시 만들고, pull 요청을 작성하고, react-native에서 나중에 expo로 병합됩니다.

@ucheNkadiCode Expo를 사용하지 않는 것이 두렵지 만 @sunnylqm 이 그가 무슨 말을하는지 알고있는 것 같습니다

나는 박람회에서 같은 문제에 직면했습니다.
나는 시도했다 : 파수꾼 watch-del-all && expo r -c
하지만 지금도 좋은 소식입니다.

TextInput을 텍스트로 변경하면 사라지는 동일한 문제에 직면하고 있습니다.

2 년 전의이 댓글은 여전히 ​​유효합니다.

FlatList에서 렌더링되는 <TextInput> 로 범위를 좁혔습니다. 이것을 <Text> 바꾸면 문제가 사라집니다.

캐시를 재설정하면 잠시 도움이되는 것 같지만 몇 번의 버튼 클릭 후 앱이 다시 충돌합니다.

내 테스트 구성 요소로 @diegoboston 테스트를 수행하면 FlatList 없이도 재현 할 수 있습니다. 여기 내 의견에서 테스트 구성 요소와 해결 방법 / 솔루션을 찾을 수 있습니다.

내부적으로 react native 0.61을 사용하는 expo SDK 37을 사용하고 있습니다.
전혀 문제가 없다는 것이 이상하지만 갑자기 빌더를 다시 시작했을 때이 문제가 발생했습니다. 아직 수정되지 않았습니까?

RN 0.62.2 + Android 동일합니다.
이 오류는 프로덕션 모드에서 호출됩니다.

image

설정에서 앱 캐시를 지우면 내 문제가 해결되었지만 이것이 허용되는 솔루션으로 보이지 않습니다.

이 문제에 대해 작업했으며 이것이 내 결과입니다 (이전 게시물은 여기에 있습니다 ).

1) 테마에 color/transparent 와 함께 android:editTextBackground 을 추가하면 문제가 해결된다는 것을 알고 있습니다.

<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) EditText 또는 View 생성자를 호출하고 컨텍스트 및 기타 속성 / 스타일을 함께 전달합니다.

ReactEditTextcreateDummyEditText 를 사용하여 EditText 인스턴스를 만든 다음 일부 스타일 (패딩, 레이아웃 ..etc)을 변경하지만 이는 레이아웃 (패딩, 여백) 및 배경색 등이 아닙니다. 사실이 코드 줄을 setBackgroundTint 에서 red 또는 transparent 로 변경하려고했지만 작동하지 않았습니다.

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가 컨텍스트를 처리 하는 방법에서 솔루션을 검색해야한다고 생각합니다.

패키지 프로그램을 다시 시작하고 캐시를 지우는 사람들이 나를 위해 일했습니다!

그러나 이것은 임시 해결책입니다.이 영구치를 어떻게 고칠 수 있습니까?

나는 자바에서 프로그래밍 방식으로 배경색을 투명하게 설정하려고했지만 여전히 런타임 오류가 발생하여 아래 코드를 믿습니다.

<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의 null 개체 참조에서 가상 메서드 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)'호출 시도 .graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875) at android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158) at android.graphics.drawable.DrawableContainer.getOpacity ( : 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) android.view.View.setBackground (View.java:21603) at android.view.View.(View.java:5547) android.widget.TextView.(TextView.java:1135) at android.widget.EditText.(EditText.java:107) at android.widget.EditText.(EditText.java:103) at android.widget.EditText.(EditText.java:99)는 android.widget.EditText에 있습니다.(EditText.java:95) com.facebook.react.views.textinput.ReactEditText.(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. com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:923)의 execute (UIViewOperationQueue.java:150) at com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:895) com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:31) at com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreog rapher.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.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)

다른 쪽에서는 https://github.com/facebook/react-native/issues/17530#issuecomment -504044357이 허용되는 예인지 스스로 묻습니다. 프로그래밍 방식으로 ..

이 토론의 누군가가 적절한 조사를하고이 문제를 해결할 것이라고 확신합니다. 감사합니다. 행운을 빕니다! : 스마일 :

여러분, "npm install"을 다시 실행 해보세요. 그것은 나를 위해 일했습니다.

<item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> 추가하려고했는데 이로 인해 앱이 충돌하지 않지만 텍스트 상자가 크고 작은 사이에서 계속 깜박이고 사용할 수 없습니다. 다른 사람이 이것을 가지고 있습니까?

제 경우에는 스타일 구성 요소를 사용하고 소품 이름을 "오른쪽"으로 설정하고 특별하다고 생각하며 "isRight"로 변경하여 문제를 해결했습니다.

릴리스 빌드를 가져 와서이 오류를 본 적이없는 APK에서 테스트하십시오.

원래 의견 은 개발 오류가 아닌 분석 버그 보고서를 통해 얻은 문제를보고하므로 집중해야한다고 생각합니다.

앱에 적합한 두 가지 포인트를 모두 시도해 볼 수 있습니다.

  1. 앱의 캐시 데이터를 삭제하고 다시로드합니다.
  2. npm start --reset-cache를 사용하여 서버를 다시 시작합니다.

Android 프로젝트에서 https://issuetracker.google.com/issues/37068452 를 여는 관련 문제가있는 것 같습니다.

  1. getConstantState ()를 재정의하지 않는 사용자 지정 Drawable 구현을 만듭니다.
  2. 사용자 정의 드로어 블의 인스턴스를 자식으로 사용하여 LayerDrawable 인스턴스를 만듭니다.
  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 런타임에서 Android로 정보를 JSON으로 보내고, Android Java API는이 정보를 사용하여 View 인스턴스를 생성하고 화면에 팽창 (표시)합니다.

Context 객체를 View 생성자에 전달하여 <TextInput /> 대한 deault 레이아웃을 확장 한 다음 underlineColorAndroid 와 같은 소품을 변경할 때마다 예를 들어 특정 Android API 메서드를 호출합니다. setUnderlineColorAndroid("red") 및 Android API가 <TextInput /> 밑줄 색상 업데이트를 처리합니다.

image

37068452 가 런타임을 유발하는 경우 BackgroundDrawable underlineColor 변경하여 mutating() 여야하지만 View 생성자에서 오류가 발생하는 경우 Context 전달합니다.

Android 스택 디버깅을 시도하지만 먼저 최소 재현 가능한 예제에서 현재 예제를 변환하고 버그를 재현하는 데 필수적이지 않은 속성을 제거하려고합니다.

재현 가능한 최소 예제를 만들 수있었습니다.
이 문제는 TextInput key prop 에서 발생합니다.

key 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 prop에 key , index 또는 id[{ 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, 즉 편집 텍스트를 다시 마운트 / 인스턴스화하는 것과 관련이 있습니다. 그 당시 나는 텍스트 입력이 이유가없는 것처럼 보였을 때 왜 다시 생성 / 재 인스턴스화되는지 이해하지 못했습니다. 이제 열쇠가 원인 일 수 있습니다.

여기에서 오류가 발생합니다.

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

즉, 복제 될 때는 null이 아니었지만 자식 요소 중 일부는 나중에 파괴되었습니다.
다음은 내 추측입니다. 키 소품은 텍스트 입력을위한 그림자 노드를 구성하는 diffing 프로세스를 트리거합니다. 그리고 그 과정에서 드로어 블 상태가 복제됩니다. 그러나 여전히 사용 중일 수있는 드로어 블 상태 중 일부를 파괴하는 경합 상태 / 스레드 안전이 아닌 작업이있을 수 있습니다. 안녕하세요.

@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 구성 요소를 사용할 때만 발생합니다. 예 교체를 들어 TextInputText 에서 renderItem 이 문제를 해결합니다

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

TextTextInput 사용의 차이점은 const elementForwardRef 와 함께 TextInput ForwardRef 가된다는 것입니다. 아래의 경우 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 prop이 문제를 일으키는 이유는 React 메커니즘이 key prop을 비교하는 것을 기반으로하기 때문이라고 생각합니다. 키 prop 메커니즘이 없으면 캐싱이되지 않고 오류가 발생하지 않습니다. .

내일 위 메시지 에서 참조한 코드에서 중단 점을 설정하려고

도움을 주셔서 감사합니다. 우리가 함께 Pull Request를 작성하여이 문제를 해결할 수 있기를 바랍니다. 좋은 저녁 되세요. 파브리 지오

뿡뿡

너무 오래 읽지 않음

이 문제를 해결하기 위해 풀 요청을 작성 중입니다. 고치는 것은 매우 쉽습니다.

이 문제는 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 init 스크립트로 react-native android 프로젝트를 초기화하는 데 사용되는 템플릿 xml 파일을 변경하여 수행 할 수 있습니다.

Android에서 기본적으로 제공되는 것을 사용하거나 사용자 정의 드로어 블을 만들어 모든 프로젝트 초기화에 포함합니다.

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="16">@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

다음은 내 추측입니다. 키 소품은 텍스트 입력을위한 그림자 노드를 구성하는 diffing 프로세스를 트리거합니다. 그리고 그 과정에서 드로어 블 상태가 복제됩니다. 그러나 여전히 사용 중일 수있는 드로어 블 상태 중 일부를 파괴하는 경합 상태 / 스레드 안전이 아닌 작업이있을 수 있습니다.

이 줄 android:editTextBackground 수정 오류,하지만 ReactNative이 라인은 무엇입니까?

1) AndroidManifest.xmlandroid: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) 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="13">@android</strong>:drawable/edit_text</item>
    </style>
</resources>

3) EditText 생성자는 super(context) 호출합니다. context 개체에는 layouttheme ( AppTheme )가 포함됩니다.

View 생성자는 context 개체에서 스타일 / 테마 / 레이아웃 정보를 가져와 해당 스타일 (xml은 html과 유사)로 EditText 인스턴스를 만들고 확장하고 화면에 표시합니다.

Android는 html과 같은 xml을 사용하여 정적 뷰를 렌더링하는 반면 Java는 동적 콘텐츠 (예 : 웹의 JavaScript)를 렌더링하는 데 사용됩니다.

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

4) ReactNativeContext API 위에 빌드되지만 1-3과 동일한 패턴을 사용합니다.
context 개체로 뷰를 초기화 한 다음 JavaScript를 사용하여 context 인스턴스를 직접 변경하지 않고 동적 변경을 수행하지만 Android API를 통해 react-native 브리지를 사용합니다.

| 이전 | 이후 | TextInput 스타일 소품 사용 후 |
| : ------------------------- : | : -------------------- ----- : | : ------------------------- : |
| | | |

초기화시 EditText에 사용되는 기본 Drawable을 변경하기 위해 Pull Request
Theme.AppCompat.Light.NoActionBar 의 Drawable로 블로 교체하면 문제가 해결됩니다. 드로어 블 <strong i="17">@android</strong>:drawable/edit_text 은 디자인에 비해 너무 높습니다. 높이가 부모보다 높으면 부모 뷰는 기본 드로어 블 높이에 맞게 조정됩니다. ReactNative가 높이가 낮은 기본 드로어 블을 사용하고 match_parent 로 부모 View에 적용한다고 생각합니다.

1) 옵션 1-다른 테마에서 드로어 블 찾기

2) 옵션 2
항상 match_parent보기에 대해 높이가 낮은 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 및 중첩 된 구성 요소 렌더링의 조합으로 범위를 좁혔습니다.

@ fabriziobertoglio1987 나는 이런 식으로 시도했지만 아마도 내가 그것을 작동하지 않은 sth를 놓쳤을 것입니다. 나는 안드로이드에 대해 거의 알지 못하며 당신이 그것을 고칠 수있어서 기쁩니다. 나는 여전히 주요 소품 문제에 관심이 있습니다.

@ fabriziobertoglio1987 어쨌든이 문제를 빠르게 해결하기 위해 추가 할 수있는 반응 네이티브 js 코드가 있습니까? 알려주세요.

@ asmi24886 이 문제를 안정적으로 재현하는 테스트 구성 요소와 여기 내 의견에서 네이티브 코드 / 구성 해결 방법을 찾을 수
JS 코드 만 사용하는 해결 방법이 없다고 생각합니다.

이것은 내 이전 메시지 https://github.com/facebook/react-native/issues/17530#issuecomment -660908150의 연속이며, 프리랜서 일자리를 찾고이 문제를 해결하기 위해 풀 요청을 작성하려는 노력입니다.

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 요청이 병합되면 upgrade-helper를 사용하여

Pull Request에는 RNTester 애플리케이션에서이 시나리오의 재현, 템플릿 변경 및이 문제를 방지하기 위해 위의 사용자 지정 드로어 블 추가가 포함됩니다.

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

드로어 블에 <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에서 사용 된 것과 동일하며 스타일은 동일하지만 런타임 오류가 발생하지 않습니다.

내일 풀 리퀘스트를 게시하려고합니다 .

이 문제를 해결하는 https://github.com/facebook/react-native/pull/29452를 작성하기 위해 저와 협력 해 주신 sunnylqm 에게 감사드립니다.

상수 상태를 확인한 후에도 일부 장치 / 안드로이드 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 .

state_pressed="false"state_focused="false" 는 TextInput BackgroundDrawable의 변경을 트리거합니다. 이미지는 문제의 원인은 아니지만 문서화 목적으로 포함했습니다.

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

DrawableContainer.getChild () ConstantState 변수 cs 내부는 null 입니다. 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 위의 주석은 네이티브 반응을 위해 추가해야하는 해결 방법 또는 실제로 구현 가능한 수정

@Coffeegerm 위의 댓글 https://github.com/facebook/react-native/issues/17530#issuecomment -662000718은 내 풀 리퀘스트 https://github.com/facebook/react-native/pull에 대한 간략한 설명입니다.

1) 새 앱에는이 오류가 없습니다.
2) 기존 앱이 업그레이드 되고 오류가 발생하지 않습니다. 애플리케이션을 업그레이드 할 때 /android 폴더에 변경 사항을 적용하는 방법에 대해 자세히 알아 보려면 upgrade # 3-upgrade-your-project-files 에서

업그레이드를 원하지 않는 경우 내 PR https://github.com/facebook/react-native/pull/29452를 확인하고 해당 변경 사항을 프로젝트 android 폴더에 추가 할 수 있습니다. 이 PR의 구성 변경 사항은 /ReactAndroid Java 코드베이스가 아니라 초기화에 사용 된 Android 템플릿에 있으므로 react-native 소스 코드를 변경할 필요가 없습니다. 프로젝트.

현재 다른 문제에 대해 작업 중이지만 다시 돌아와 피드백에 답하고 풀 리퀘스트에 필요한 개선을 할 것입니다.

개선 및 피드백에 대한 제안 사항이 있으면 다시 돌아 오십시오.

좋은 주말 보내세요
도와 주셔서 정말로 고맙습니다
파브리 지오

https://github.com/facebook/react-native/commit/1e4d8d902daca8e524ba67fc3c1f4b77698c4d08 관련 소리가 나는 커밋을 방금 보았습니다.

중복 된 Create + Delete 작업을 너무 많이 생성하여 정상적으로 처리하지 않는 플랫폼에서 일관성 문제, 충돌 또는 버그를 일으킬 수 있습니다.
특히 Create + Delete의 순서가 보장되지 않기 때문입니다 (상위 뷰가 "먼저"생성 될 수 있고 다른 뷰가 나중에 동일한 뷰에 대해 "삭제"를 발행 할 수 있음).

안녕하세요.

Expo를 사용하는 동안 프로젝트의 Android 폴더에 액세스하지 않고이 문제를 해결할 수있는 방법에 대한 아이디어가 있습니까? 😅

@divonelnc 해결 방법이 있습니다. 예를 들어, 텍스트 입력이 렌더링 될 때마다 새 키를 사용합니다.

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

물론 다른 문제와 성능 손실이 발생할 수 있습니다.

@sunnylqm 불행히도 도움이되지 않았습니다 😞. 수십 개의 텍스트 입력으로 화면에서 무작위로 충돌이 발생합니다.

프로덕션에서이 문제를 확인할 수 있습니다! RN : 0.62.2 😕

RN 0.63.2에서도 동일한 문제가 발생했습니다.

이 커밋으로이 문제를 해결할 수 있습니다.
https://github.com/facebook/react-native/commit/a5b5d1a805a9c54d325763b432be1cf2c8811dc9

와우 답답 했어요. @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 -rc) + 엑스포 모바일 앱 캐시 (확실히 제거하고 다시 설치)를 모두 정리해야했는데 오류가 사라졌습니다.

@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

홍보로 향할하십시오 https://github.com/facebook/react-native/pull/29452 의 지시에 따라 https://github.com/facebook/react-native/wiki/Building-from-source#publish을 - 당신 자신의 반응 네이티브 버전과 도움이 필요하면 알려주세요. 나는 이번 주말에 Expo를 위해 별도의 홍보를 작성해야하는지 확인하려고 노력할 것이지만,이 홍보가 병합되고 출시되면 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을 추가하여 해결할 수 있다는 것을 이해했습니다. 항목:
"item name ="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 % 저에게

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

@jordangrant ,도! 항상 물어보기 전에 확인하십시오. 나는 실패했다. 감사합니다.

또한 문제를 일관되게 재현 할 수 있었던 것 같습니다. 어떻게 그렇게하는지 궁금합니다. 지금까지 스택 추적 만 보았습니다. 수정 사항을 확인하는 방법을 찾고 있습니다.

@bobowinca 여기에 게시 한 테스트 구성 요소는 일관성있게 재현하는 데 도움이 될 것입니다.

@bobowinca 여기에 게시 한 테스트 구성 요소는 일관성있게 재현하는 데 도움이 될 것입니다.

매력처럼 작동합니다! 감사합니다 Glenn!

styles.xml에 <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> 추가가 작동합니다!
TextInput의 key={Math.random().string()} 에 추가하는 방법이 작동했지만 rerenders로 인해 매초마다 키보드가 숨겨 지므로 허용되지 않았습니다.

이 페이지가 도움이 되었나요?
0 / 5 - 0 등급