React-native: NullPointerException: godaan untuk menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)'

Menghadapi Masalah yang Sama.

Sama di sini [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

Masalah yang Sama

Masalah yang sama. Logtrace yang sama

Sama di sini di RN 44.0

+1 anotha 'satu

Teman-teman yang memulai ulang pengemas dan membersihkan cache berhasil untuk saya!

Masalah yang sama bagi saya. Saya menggunakan RN 0.51.0 dan react-native-material-textfield 0.12.0.

Saya menghadapi masalah ini juga. Hal yang aneh adalah sangat sulit untuk melacak kesalahan karena jejak tumpukan tidak berisi informasi yang berguna. Saya bahkan tidak tahu di mana kesalahan itu bisa terjadi.
Akan memperbarui di sini Jika saya menemukan solusinya

Kesalahan yang sama terjadi pada RN 0.52.0.

Terima kasih telah memposting ini! Sepertinya Anda tidak menggunakan versi terbaru React Native, v0.53.0, yang dirilis pada Januari 2018. Dapatkah Anda memastikan masalah ini masih dapat direproduksi di versi terbaru?

Saya akan menutup ini, tetapi jangan ragu untuk membuka terbitan baru jika Anda dapat memastikan bahwa ini masih menjadi masalah di v0.53.0 atau yang lebih baru.

_{Bagaimana Berkontribusi • Apa yang Diharapkan dari Pelayan}

Masalah yang sama di 0.53.3

Masalah yang sama

@ react-native-bot Perlu membuka kembali masalah

menghadapi masalah yang sama dengan Android 8

Sama disini. Bereaksi asli 0.53.3, SM-T550, API Level 25 (Android 7.0)

masalah ini baru saja muncul pada saya, React native 0.53.3 - Android 8.1.

Bereaksi native 0.53.3, android 8, masalah yang sama

Masalah yang sama, react-native 0.53.0 dan android 8. Aneh karena kesalahan ini sepertinya muncul secara acak. Saya tidak dapat menemukan langkah pasti untuk mereproduksinya.

Memiliki aplikasi produksi yang menjalankan RN 0.54.2 dan ini tampaknya memengaruhi beberapa pengguna yang menjalankan Android 8.0.0 saat aplikasi dimulai.

Mengapa masalah ini ditutup? Beberapa dari kita menghadapi masalah ini dalam lingkungan produksi, jadi "memulai ulang pengemas" bukanlah solusi yang dapat diterima.

Masalah ini perlu dibuka kembali karena memengaruhi versi saat ini.

Saya juga menghadapi jejak tumpukan yang mungkin terkait:

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 dapatkah kita membuka kembali masalah ini?

Masalah yang sama di sini Android 8.0 api 26

Sama dengan 0.54.2.

Saya telah mempersempitnya menjadi <TextInput> yang dirender di dalam FlatList. Saat saya mengganti ini dengan <Text> , masalah hilang.

Harap mereproduksi dengan versi terbaru yang tersedia sekarang dan saya akan membukanya kembali.

Sama di sini @ radko93

Android 8.1 API 27

"ketergantungan": {
"bereaksi": "16.3.1",
"react-native": "0.55.1",
"react-native-linear-gradient": "^ 2.4.0",
"react-native-vector-icons": "^ 4.6.0",
"react-navigation": "^ 1.5.11"
},

Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
createAllFutures
DrawableContainer. java: 875
getOpacity
DrawableContainer. java: 1158
getOpacity
DrawableContainer. java: 433
getOpacity
InsetDrawable. java: 258
computeOpaqueFlags
Melihat. java: 15698
setBackgroundDrawable
Melihat. java: 20502
setBackground
Melihat. java: 20395

Melihat. java: 5238

TextView. java: 826

EditText. java: 88

EditText. java: 84

EditText. java: 80

EditText. java: 76
setThemedContext
ReactTextInputShadowNode. java: 80
createView
Implementasi UII. java: 282
createView
UIManagerModule. java: 366
memohon
Method.java
memohon
JavaMethodWrapper. java: 372
memohon
JavaModuleWrApper. java: 160
Lari
NativeRunnable.java
handleCallback
Penangan. java: 790
dispatchMessage
Penangan. java: 99
dispatchMessage
MessageQueueThreadHandler. java: 29
lingkaran
Looper. java: 164
Lari
MessageQueueThreadImpl. java: 192
Lari
Benang. java: 764

Masalah yang sama

package.json
"ketergantungan": {
"bereaksi": "16.3.1",
"react-native": "0.55.2",
},

build.gradle
compileSdkVersion 26
buildToolsVersion "26.0.2"
minSdkVersion 16

Masalah yang sama.

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

Android: 7.1.1
React-Native ： 0.48.3

Masalah yang sama.

masalah yang sama, di lingkungan produksi, perangkat saya adalah HUAWEI (LLD-AL10) 8.0.0, saat ini saya menggunakan React Native 0.46.2, terima kasih

Mendapatkan masalah yang sama saat menggunakan versi terbaru react-native (0.55.3). Masalahnya tampaknya terkait dengan TextInput dalam FlatList seperti yang disebutkan di atas. Mendapatkan kesalahan di Android 8.0 dan 8.1. Ada solusi untuk menghindari masalah ini?

Saya dapat mereproduksi bug ini dengan membuat proyek React Native baru dengan react-native init dan mengubah App.js menjadi

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>
    );
  }
}

Saya menjalankan ini di Galaxy S8 dengan Android 8.0.0 dari MacOS 10.13.3.

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

Saya tidak tahu apakah error tersebut tidak terkait langsung dengan jumlah TextInputs, tetapi ini adalah satu-satunya cara saya dapat mereproduksi bug ini dengan cara yang cukup andal. Dengan 128 masukan saya tidak mendapatkan kesalahan ini pada setiap restart tetapi setelah beberapa kali memuat ulang kesalahan ini muncul. Pada 256 TextInputs kosong, saya rasa saya tidak dapat memulai aplikasi tanpa mendapatkan kesalahan. Saya juga memperhatikan bahwa menambahkan elemen antara TextInputs tampaknya mengurangi kemungkinan mendapatkan kesalahan ini, jadi kemungkinan besar tidak terkait langsung dengan jumlah TextInputs. Saya mencoba ini di aplikasi saya saat ini dan menambahkan ratusan TextInput ke layar awal juga memicu kesalahan ini, tetapi tampilan saya yang lain dengan jumlah yang sama dari TextInput yang dibungkus dengan elemen lain tampaknya tidak selalu memicu kesalahan ini karena saya memiliki beberapa di aplikasi saya .

Saya memiliki masalah yang sama. Saya menjalankan ini di Huawei P10 dengan Android 8.0.0.
"react": "^16.2.0", "react-native": "^0.55.0",
Screenshot

Sepertinya masalahnya ada di TextInputs. Ini terjadi pada Huawei P10 saya (Android 8.0.0). Apakah sudah ada perbaikan untuk ini?

Android: 7.1.1
"react-native": "0.53.3",

Terima kasih telah memposting ini! Sepertinya masalah Anda mungkin mengacu pada versi React Native yang lebih lama. Dapatkah Anda mereproduksi masalah tersebut pada rilis terbaru, v0.55 ?

Terima kasih atas kontribusi Anda.

Saya menghadapi masalah yang sama. Ini terkait dengan komponen TextInput. Bahkan satu TextInput yang ditampilkan di layar menyebabkan kesalahan ini. Apakah ada solusi lain?

react-native: 0,55
bereaksi: 16.3.1

Saya mengubah konstruktor ReactEditText "super", sepertinya tidak terjadi,
tapi beri komentar "underlineColorAndroid"
https://github.com/yuanboGeng/react-native/commit/36f7949f9a3e9c1f3b10df43a9f495f9f8712a1f
react-native: 0,53.3
bereaksi: 16.2.0

Ini mulai terjadi pada saya setelah mengupgrade emulator saya ke API level 26 dari API level 21

Saya mengalami kesalahan ini muncul tanpa alasan saat mengembangkan. Saya membersihkan folder / build saya dan menjalankan run-android lagi. Masalahnya hilang. Sangat aneh. Saya berharap untuk beberapa dari Anda, build yang bersih akan menyelesaikan masalah ini.

Mengalami masalah yang sama. Satu perbedaan kecil - pada saya, saya menumpuk TextInputs di dalam VirtualizedList (induk dari FlatList) dan saya hanya mendapatkan masalah ketika saya mulai menggulir daftar itu, bahkan kemudian hanya mendapatkannya sesekali daripada sepanjang waktu. Sama halnya dengan yang lain, ini terjadi di lingkungan produksi, jadi memulai ulang pengemas bukanlah pilihan.

Berdasarkan beberapa penggalian, tampaknya terkait dengan masalah lama di Android itu sendiri: https://issuetracker.google.com/issues/37068452
Jika itu masalah yang mendasarinya, ini akan diselesaikan hanya dengan mengupgrade versi compileSdk dan support library dalam project RN. Tidak tahu LoE tentang itu.

Pembaruan: mencoba memaksa subproyek untuk menggunakan versi alat build yang lebih tinggi dan compileSdk tidak menyelesaikan masalah ini untuk proyek saya, seperti yang dijelaskan dalam posting SO ini . Tidak yakin apakah saya salah menerapkan versi yang lebih tinggi tersebut, jika penyiapan build saya tidak memperlakukan RN sebagai subproyek dengan cara itu, atau jika itu sebenarnya bukan solusi yang valid untuk masalah di sini.

EDIT 2: Tampaknya ReactEditText bahkan tidak menggunakan versi pustaka dukungan EditText (yang akan menjadi AppCompatEditText), yang menjelaskan mengapa memutakhirkan pustaka dukungan tidak melakukan apa-apa. Saya sedang menyelidiki ini - ini akan membutuhkan beberapa pembaruan lebih dari sekadar mengubah warisan agar ini berfungsi, tetapi _might_ menjadi solusi yang tepat untuk masalah ini.

EDIT 3: Itu bukanlah solusinya. Saya tidak lagi yakin bahwa masalah ini sama dengan masalah AOSP yang ditautkan.
Saya dapat mengatakan bahwa tampaknya tidak masalah jenis ScrollView yang Anda masukkan teks Anda - saya dapat mereproduksi di VirtualizedList dan ScrollView, dan banyak di utas ini telah melakukannya dengan FlatList.

Saya memiliki hal yang sama dalam produksi

Saya juga menghadapi masalah ini. Menjalankan cd android ; ./gradlew clean ; cd .. ; react-native run-android bekerja untuk saya seperti yang ditunjukkan @mbret (terima kasih!)

Bagus, tapi bagaimana dengan aplikasi yang diproduksi dengan klien nyata? : |

Maaf @ahanusek , saya tidak mengatakan ini menyelesaikan masalah, saya hanya mengatakan bahwa dalam pengembangan ini berhasil untuk saya (dengan harapan ini juga akan membantu orang lain).

Tetapi bahkan untuk pengembangan itu bukanlah solusi. Oke, Anda membersihkan build Anda, memulai aplikasi lagi, tetapi jika Anda menggunakan input "hampir tidak", Anda masih bisa mendapatkan error ini lagi.

@ahanusek Ya, saya setuju dengan Anda, dan sama sekali tidak berdebat dengan Anda. Ini bukanlah solusi, tetapi bagi saya, dan untuk saat ini, telah berhasil memungkinkan saya untuk terus berkembang

Juga melihat ini, v0.55.4:

Cukup yakin saya tidak memiliki TextField di FlatList atau VirtualizedList, fwiw. Ini terjadi dalam produksi kami.

Melihat masalah ini di v0.55.4 . Dan ya kami menggunakan TextInput dalam Daftar.

Terjadi pada reaksi 0,55. Berikut

Juga terjadi di react native 0,55, menggunakan input dalam daftar datar.

Membuat postingan sebenarnya di sini seandainya orang tidak melihat komentar saya yang telah diedit:

Saya dapat mengatakan bahwa tampaknya tidak masalah jenis ScrollView yang Anda masukkan teks Anda - saya dapat mereproduksi di VirtualizedList dan ScrollView, dan banyak di utas ini telah melakukannya dengan FlatList.
Atau, dengan kata lain, masalahnya bermuara pada
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

Masalah yang sama

Saya juga menghadapi masalah yang sama.

Anehnya, ini tidak mulai terjadi pada saya sampai tadi malam dan saya telah merender TextInputs dengan cara yang sama selama lebih dari sebulan sekarang dalam pengembangan.

Android versi 9
Bereaksi "16.3.1"
React-Native "~ 0.55.2"

Kami juga menghadapi masalah serupa dalam kode kami

Log kerusakan:
Fatal Exception: java.lang.NullPointerException: Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
di android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
di android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
di android.view.View.computeOpaqueFlags (View.java:16791)
di android.view.View.setBackgroundDrawable (View.java:21710)
di android.view.View.setBackground (View.java:21603)
di android.view.View.(View.java:5547)
di android.widget.TextView.(TextView.java:1135)
di android.widget.EditText.(EditText.java:107)
di android.widget.EditText.(EditText.java:103)
di android.widget.EditText.(EditText.java:99)
di android.widget.EditText.(EditText.java:95)
di com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:92)

Apa yang menjadi masalah di sini?
Mencoba beberapa investigasi:
- Lebih dari 1000 teks editan berfungsi di aplikasi android murni
- sekitar 200 ReactTextInput gagal seperti yang disebutkan di sini

• Beberapa analisis masalah mengungkapkan skenario multithreading aneh yang melanggar dari SparseArray
  - SparseArray bukan threadsafe dan pada saat yang sama ada logika gc () di dalamnya
  - SparseArray digunakan untuk DrawableContainerState dan DrawableContainerState baru dapat dibuat menggunakan masa depan drawable keadaan konstan yang ada (ini adalah SparseArray) dengan mengkloning
  - Di atas adalah resep untuk pengecualian nullpointer multi-utas dan itu terjadi seperti di bawah ini
  - Utas modul asli yang bekerja pada pembuatan node bayangan Teks Edit Bereaksi dan siklus hidupnya melakukan EditText baru (konteks bertema react) yang pada gilirannya menghasilkan drawable latar belakang untuk disetel dan akhirnya memanggil kode tidak aman utas SparseArray
  - Sementara utas UI dapat digunakan untuk membuat tampilan EditText dari beberapa RTI lain pada saat yang sama mengarah ke kode tidak aman utas SparseArray yang sama
  - Pengecualian Nullpointer terjadi ketika gc () dipanggil dan secara bersamaan klon (klon ini terjadi secara internal di kelas Drawable *) sedang dilakukan untuk objek yang sama sehingga memunculkan objek yang sebagian di-gc. Sesuatu seperti item dari larik nilai telah dihapus dan null-ed tetapi bendera noOfItems belum diperbarui, jadi objek kloning memiliki satu item kurang dari yang ditentukan dalam bendera noOfItems dan iterasi dapat menyebabkan pengecualian pointer nol untuk indeks yang dihapus.

Bagaimana kami memecahkan atau membuatnya berhasil?
[1] Pindahkan panggilan EditText (konteks) baru pada thread UI juga dan buat pengukuran ShadowNode async tetapi tunggu sampai objek EditText ini dibuat pada thread UI - pada dasarnya menulis ulang shadow node setThemedContext dan mengukur fungsi
Kekurangan: thread switch untuk setiap RTI

[2] Buat EditText menggunakan layout inflater pada modul Native sambil menentukan null untuk latar belakang dan buat hanya sekali drawable latar belakang dengan membuat EditText di thread UI dan menyimpan drawable latar belakangnya ke level shadowNode. Drawable ini digunakan untuk menyetel latar belakang dummyEditText yang dibuat menggunakan layout inflater untuk mendapatkan ukuran yang mempertimbangkan bantalan garis batas drawable. Dalam hal ini ukuran hanya perlu menunggu satu kali untuk pembuatan Drawable

Saya telah menguji keduanya dan keduanya berfungsi dengan baik untuk 1024 ReactTextInput.

Catatan: Berdasarkan investigasi, ini sepertinya bukan solusi yang paling elegan tetapi berfungsi dengan sedikit perubahan dan membuktikan analisis masalah.

Saran dan kritik sangat kami harapkan!

Kode Shadow Node:

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

import javax.annotation.Nullable;
// CATATAN: Kelas ini tidak jauh berbeda dengan ReactTextInputShadowNode yang diharapkan dalam mekanisme
// mengatur konteks tema dan melakukan pengukuran
public class ReactTextInputShadowNode memperluas ReactBaseTextShadowNode mengimplementasikan YogaMeasureFunction
{
@VisibleForing
public static final String PROP_TEXT = "text";
private static 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();
}

} `

File tata letak teks edit tiruan

<?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 apakah Anda memiliki kode untuk solusi ini? Terima kasih!

Memperbarui komentar terakhir saya untuk menyertakan kode ShadowNode dan tata letak yang digunakan untuk menggembungkan teks editan tiruan

@sayantanbugs - Itu pekerjaan 🕵️ yang bagus! Kami akan mencobanya di proyek kami dan melaporkannya kembali! Terima kasih!

Masalah yang sama
ReactNative: 0.55.4
Android: 8.0

@sayantanbugs dapatkah anda memberikan diff / patch?

Masalah yang sama. Dilaporkan melalui Crashlytics tanpa banyak detail lainnya, jadi sangat sulit untuk memecahkan masalah.

RN 55.3
Android 8

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

Ini adalah penyebab utama aplikasi kami mogok dalam produksi. Kapan / bagaimana ini bisa terjadi?

Sama di sini di produksi build.
Terjadi saat mengedit teks. Itu acak.

bereaksi: 16.3.0
react- native: 0.54.4
masalah yang sama, bagaimana cara memperbaikinya?

^^^ Lebih banyak orang harus mencoba memperbaiki masalah dengan solusi @sayantanbugs . Cukup cari file ReactTextInputShadowNode.java Anda di folder react-native dan tukar kode yang dia berikan adalah postingannya. Anda mungkin akan terkejut.

Setelah seminggu sejak saya melakukannya, dengan senang hati saya melaporkan kembali bahwa kesalahan hanya terjadi sekali. TAPI kali ini berbeda .. Saya dapat memulai ulang aplikasi dan membuatnya berfungsi normal tanpa perlu menginstal ulang aplikasi melalui react-native run-android yang benar-benar menyebalkan karena sebelumnya saya benar-benar kehilangan akses ke beberapa layar yang memberikan TextInputs tersebut. Saya akan terus mencatat kesalahan jika muncul lagi tetapi sejauh ini saya pikir itu berfungsi dengan sempurna di pihak saya. Debugging luar biasa, @sayantanbugs!

@ Friendly-Robot imo itu bukan solusi. Ini solusi terbaik. Ini terjadi dalam kode produksi di mana kami tidak bisa begitu saja menambal solusi yang belum teruji yang bahkan Anda akui tidak memperbaikinya.

Jika itu mengganggu dev, tentu saja. Tetapi menurut saya tidak bijaksana untuk memotivasi orang untuk menggunakannya sebagai solusi. Mungkin sebagai dasar untuk PR.

Setuju dengan @ Friendly-Robot (meskipun demikian, terima kasih @sayantanbugs ). Adakah dari RN di sini? Apakah menurut Anda patch tersebut dapat mencapai repo RN dan diuji?

Oke, saya akhirnya bisa menguji pendekatan @sayantanbugs , tetapi tampaknya tidak berhasil untuk saya (ini juga berdasarkan kode non-master). Namun, sebagai solusi sementara (vs solusi kerangka kerja), Anda dapat memberikan salinan ReactEditText dengan metode drawableStateChanged() ditambal:

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

Ini secara harfiah hanya tambalan, tetapi setidaknya aplikasi tidak akan mogok. Input Teks masih responsif dan berfungsi seperti yang diharapkan, sejauh yang saya tahu.

Saat mereproduksi crash (sekarang sudah diperbaiki), saya dapat melihat bahwa pengecualian yang sebenarnya ini terjadi beberapa kali secara berurutan.

EDIT:
Hmmm ... meskipun semuanya tampak berfungsi, tampaknya status Drawable telah rusak secara permanen. Bahkan setelah membuat tampilan yang benar-benar baru dengan Input Teks baru, menyentuh input teks apa pun akan menyebabkan pesan muncul lagi. Untungnya itu hanya muncul saat mengklik input dan bukan saat memasukkan teks.

Saya telah bermain dengan tampilan dan transisi saya malam ini, saya mendapatkan kesalahan ini seperti dua puluh kali ... Saya tidak melakukan apa pun selain mengklik navigasi saya untuk menguji transisi antar tampilan. Saya rasa itu masalah besar: /

Terima kasih @ Friendly-Robot telah menguji solusinya!

Setuju dengan sebagian besar pandangan tentang solusi saya sebagai tambalan dan saya menyebutkannya di posting asli saya yang menyertakan solusinya. Alasan mengapa itu masih bisa digunakan dalam proyek saya adalah karena kami telah membuat RTI yang lebih kaya fitur di sisi kami memperluas RN RTI. Karenanya kami dapat menggunakan solusi saya dalam implementasi ShadowNode dari RTI kustom saya. Faktanya dalam proyek kami, kami mempertahankan versi RN yang dimodifikasi untuk memperbaiki banyak bug / kasus penggunaan RN, dan karenanya kami juga bisa mendapatkan perubahan ini ke dalamnya.

Saya berencana untuk memberikan ini pandangan kedua tentang kemungkinan lain karena saya harus menyelesaikan masalah yang sedang hangat di tangan dalam hitungan beberapa hari selama waktu itu.

Terima kasih atas tanggapan Anda!

@davidmontemayor , jika masalah status
Ini membuat kita berpikir bahwa kita mungkin menulis ulang ShadowNode sendiri sehingga kita tidak memerlukan objek EditText seperti yang digunakan pada titik ini selain menggunakan fungsi pengukuran.

Terjadi juga untukku. Saya menggunakan ScrollView.
Saya memiliki berbagai kontrol (radio, daftar, teks edit, dll) dalam tampilan gulir. Saya akan mengatakan saya memiliki maksimal 10 kontrol, jadi bukan daftar yang besar.
Sulit untuk mereproduksi. Tampaknya terjadi pada waktu acak, tetapi saya pikir saya melacaknya untuk membawa aplikasi ke latar depan dari latar belakang ketika saya memiliki ScrollView di layar (dengan kontrol edittext di dalamnya).
Tidak 100% yakin
Saya ingin tahu apakah ini terkait dengan versi lib dukungan Android.

Ayo FB, perbaiki bug ini.
Sulit untuk membuat aplikasi berkualitas produksi ketika kami mengalami crash acak seperti ini.

com.facebook.react.views.textinput.ReactEditText
RN 0,54
SDK Android 27
Telepon 8.1

Mengalami masalah ini juga, juga menggunakan ScrollView. @davidmontemayor , dapatkah Anda mengarahkan RN newb-nya ke file mana yang Anda edit oleh struktur direktori? Saya memiliki aplikasi di pasaran yang menyebabkan crash dan berharap untuk menangkap kesalahan seperti yang Anda lakukan sampai perbaikan terjadi. Apakah Anda memiliki contoh file yang Anda gunakan?

Sama:

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 - Sayangnya EditText . Untuk latar belakang, ada _dua_ cara berbeda untuk mewujudkan masalah ini:

• Saat ReactEditText dibuat ( android.widget.EditText.<init>(EditText.java:95) )
• Ketika ReactEditText berinteraksi dengan ( android.widget.TextView.onTouchEvent(TextView.java:8467) )

Kuncinya adalah mengganti tampilan yang dibuat di ReactTextInputShadowNode . Alih-alih membiarkannya melakukan new EditText(getThemedContext()) , buat kelas Anda sendiri yang dimulai dari EditText . Anda kemudian dapat menangkap pengecualian yang disebabkan oleh jalur kedua di drawableStateChanged() .

Bagian yang lebih sulit adalah memperbaiki kesalahan inisialisasi. Untuk itu Anda perlu membuat kelas "Drawable Wrapper" yang dapat digunakan untuk membungkus semua drawable yang dilewatkan ke EditText.setBackground() . Pembungkus ini kemudian harus menangkap pengecualian yang dilemparkan dari delegasi.

Masalah ini masih terjadi secara acak dengan aplikasi saya dengan versi terbaru React Native + JSC + gradle terbaru per 25 Juli 2018

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

Saya mulai melihat masalah ini dengan Android 8.0.0 dan dengan RN 0.55.3. Apakah ada solusi untuk ini atau mungkin PR?

Memiliki masalah yang sama secara acak juga dengan FlatList of TextInputs 😞

• React-Native: 0.55.4

java.lang.NullPointerExceptionMainActivity

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

Berdasarkan membaca dan debugging, saya memutuskan untuk mencoba yang berikut ini akhir pekan ini ...

1. Hapus semua panggilan underlineColorAndroid dari kode saya (saya menggunakan react-native-elements 0.19)

   • aplikasi harus kembali menggunakan transparent untuk kontrol EditText
   • coba juga paksa menjadi transparan

2. Perbarui gaya Android saya untuk mengikuti. Ini akan memaksa semua kontrol EditText memiliki latar belakang transparan

<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. Tes tes tes. Masalah sulit direproduksi. Meskipun seorang klien menemukannya pagi ini.

2. Sebagai fallback, implementasikan perbaikan dari @sayantanbugs
   4.1 Perbarui react-native-elements ke 1.0xx beta

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

RN 0,54
React-native-elements 0.19

Terjadi pada RN 0.56.0 Android 8.1.0
Ingin tahu apakah ada rencana untuk melanjutkannya.

Coba ganti semua contoh
underlineColorAndroid={"transparent"}
dengan
underlineColorAndroid={"#00000000"}

Mengalami masalah ini. Selesaikan dengan sesuatu yang rumit. Buat tombol yang menangani render input saat ini. Jadi kami memiliki FlatList tombol dan hanya TextInput yang kami edit sekarang. Tanpa ref kita perlu klik dua kali untuk memulai edit input

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 Apakah solusi Anda berhasil?

@xstreamcl solusi yang saya posting bekerja sejauh ini. Selama 2 minggu dan saya belum melihat masalahnya.
Perlu lebih banyak pengujian;)

Masalah ini juga menyebabkan aplikasi kami mogok dalam produksi. Ini bug yang buruk, karena sangat sulit berkembang biak. Kami telah menemukan perbaikan yang menjanjikan untuk aplikasi kami, dan saya ingin membagikan temuan kami di sini untuk semoga menghemat waktu & frustrasi orang lain.

Spesifikasi dan Versi

Bug ini telah menyebabkan aplikasi kami mogok di perangkat Samsung, Google, dan LG Android. Kami mendapat laporan kerusakan dari versi Android berikut:

• 8.0.0
• 8.1.0
• 7.1.1

Aplikasi kami sedang berjalan:

• react-native : 0.53.0
• react : 16.2.0

Apa yang menyebabkan kecelakaan itu

Seperti yang telah dicatat orang lain di utas ini, masalah tampaknya dipicu oleh merender beberapa kombinasi komponen TextInput , FlatList , dan ScrollView . Dalam kasus kami, kami memiliki layar yang berisi satu TextInput diberikan di atas FlatList . Ketika salah satu item di FlatList diketuk, aplikasi menavigasi ke layar baru yang berisi formulir. Komponen root formulir ini adalah ScrollView yang berisi sejumlah TextInput komponen (bersama dengan beberapa tombol dan komponen kustom lainnya). Aplikasi kita macet saat pengguna mengetuk salah satu item FlatList (perhatikan bahwa itu tidak terjadi _every_ time).

Mereproduksi masalah ini sulit. Faktanya, kami tidak dapat melakukannya. Tapi kami tahu bahwa crash terjadi pada titik ini dalam alur kerja dengan menonton rekaman sesi Appsee kami.

Karena kami tidak dapat mereproduksi masalah, kami harus mengandalkan log kerusakan dari Appsee untuk men-debugnya. Saya telah menyalin jejak tumpukan dari laporan kerusakan di bawah (dan menghilangkan beberapa bagian yang berisik). Ini lebih atau kurang identik dengan pelacakan tumpukan yang diposting di utas ini oleh orang lain:

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)

Sumber masalahnya

Setelah membaca utas ini dan melakukan beberapa jam atau penelitian, saya menemukan penangan underlineColorAndroid prop di file ReactTextInputManager.java :

@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);
  }
}

Laporan bug yang ditautkan ke dalam komentar berisi pelacakan tumpukan berikut:

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)

Ini cocok dengan pelacakan tumpukan yang kami temui di aplikasi kami. Saya tidak berpura-pura memahami sepenuhnya masalah yang mendasarinya, tetapi tampaknya penyebab aplikasi kami mogok dalam produksi adalah karena bug Drawable.mutate() dipicu. Ini terjadi saat kita mencoba menyetel underlineColorAndroid prop pada komponen TextInput (dan dengan demikian memanggil metode ReactTextInputManager.setUnderlineColor ).

Aplikasi kami merender TextInput dengan props berikut, salah satunya adalah 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"
/>

Bagaimana kami memperbaikinya

Kami perlu menyetel properti ini untuk menghapus garis bawah dari komponen TextInput di aplikasi kami. Namun berdasarkan temuan kami, penangan prop tampaknya memicu bug Android yang menyebabkan aplikasi sesekali mogok.

Untungnya, ada cara lain untuk menghapus garis bawah dari TextInput komponen di Android. Anda dapat menambahkan baris ke file 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>

Perhatikan bahwa saya juga telah melihat saran berikut ini, tetapi ini tidak menghapus garis bawah untuk kami:

<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>

Ini tidak mengatasi masalah yang mendasarinya. Ini hanyalah solusi yang melibatkan menghindari penggunaan underlineColorAndroid prop pada TextInput komponen.

Saya belum dapat mengatakan dengan pasti bahwa ini benar-benar berfungsi, karena saya tidak dapat mereproduksi masalah secara lokal. Kami akan menerapkan perubahan ini dalam pembaruan untuk aplikasi kami dalam beberapa minggu mendatang. Setelah itu, kita harus menunggu beberapa saat untuk melihat apakah itu terjadi lagi. Saya akan mencoba melaporkan kembali dengan temuan kami.

Semoga berhasil untuk semua orang yang bergulat dengan masalah yang membuat frustrasi ini! Saya harap ini membantu.

Terima kasih @Hopding tampaknya solusi Anda berhasil!

@Tokopedia
Ya Bekerja, terima kasih banyak

Bagi kami, masalah ini, dan semua masalah serupa di mana Anda menemukan metode panggilan pada referensi null di Android disebabkan oleh tidak memiliki gaya yang tepat di aplikasi .

Masalahnya adalah bahwa sebagian besar dari react-native komponen - jika tidak semua - diturunkan dari appcompat komponen; mis . Karenanya, memiliki gaya seperti ini adalah wajib:

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

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

Ini terjadi karena komponen appcopmat tidak dirender di tempat pertama dan karenanya view.getDrawable() mengembalikan nilai null yang tidak dapat Anda panggil metode seperti: setUnderlineColor atau setColorTint (Switch juga mengalami masalah ini).

Dalam kasus kami, karena kami menggunakan react-native untuk membuat perpustakaan asli yang kemudian diinstal dalam aplikasi asli kami tidak dapat mengontrol bahwa gaya ada di aplikasi akhir. Tho, setidaknya sekarang kami menyadari masalah itu dan kami meningkatkan dokumentasi kami;)

Semoga membantu!

@sospedra Komentar Anda masuk akal, tetapi saya telah memeriksa kode saya dan menemukan bahwa appcompat sudah ada dalam gaya saya. Jika Anda memeriksa solusi Hopding, dia juga sudah memiliki appcompat .

@Tokopedia
Gaya ini berfungsi dengan baik:

@WilliamAlexander , saya tidak bisa mendapatkan saran Anda untuk berfungsi. Bisakah Anda memasukkan seluruh gaya yang cocok untuk Anda?
Masalah lain yang saya hadapi adalah ketika menerapkan perbaikan @Hopding adalah hal itu mempengaruhi tata letak input teks multiline saya sehingga keyboard menutupi sebagian input teks sekarang. Merobek rambut saya mencoba memperbaiki masalah yang tampaknya sederhana ini

Pembaruan: Gaya @Hopding perlu ditulis dengan cara ini

    <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>

Saya harus menambahkan padding untuk memperbaiki tata letak yang melanggar.

@ gavin-gmlab.

Ini dia.
`

<!-- 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>

`

Menghapus underlineColorAndroid = "transparent"

dan mengubah style.xml

itu bekerja untuk saya

tidak ada solusi di atas yang berhasil untuk saya, tetapi tampaknya menutup aplikasi plus packager dan menjalankan ulang berhasil ..

Cukup hapus data aplikasi Anda dan jalankan kembali

Terima kasih @WilliamAlexander dan @Hopding untuk solusinya, tetapi ketika saya mengubah latar belakang, itu juga menghapus padding InputText saya. Alih-alih, saya menggunakan backgroundTint dan berfungsi dengan baik tanpa ada perubahan padding

`` ''

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

`` ''

Oke, apakah ada solusi untuk ini untuk pengguna Expo kecuali mengeluarkan?

@Twishka Sayangnya Anda juga harus mengeluarkan ke react-native mentah, karena Expokit memiliki masalah yang sama.

Saya bahkan tidak menyetel underlineColorAndroid di mana pun di aplikasi saya masih mendapatkan log ini di konsol firebase. Dan saya tidak tahu bagaimana mereproduksi masalah ini lagi.

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)

Berbicara tentang warna, saya memiliki placeHolderTextColor dan borderColor menjadi #acacac dan ketika beberapa masalah validasi terjadi borderColor menjadi red . Selain itu, saya bahkan tidak menetapkan underlineColorAndroid .

Setiap bantuan dihargai.

@mddanishansari Sejak rn 0,56 underlineColorAndroid disetel secara default , jadi Anda memerlukan perbaikan yang disebutkan di atas.

@mddanishansari Sejak rn 0,56 underlineColorAndroid disetel secara default , jadi Anda memerlukan perbaikan yang disebutkan di atas.

Terima kasih banyak. Saya tidak mengharapkan balasan begitu cepat. Masalahnya adalah bahwa semua latar belakang asli asli EditText juga transparan yang terlihat aneh. Beberapa layar aplikasi saya juga dalam native original (Java).

Saya hanya bertanya-tanya bagaimana sebenarnya masalah ini bisa diselesaikan. Solusi yang diberikan hanyalah peretasan sederhana. Baik?

Hai kawan. Jadi, menggunakan underlineColorAndroid memicu error ini.
Tapi sekarang, sebagai tambahan, underlineColorAndroid disetel secara default.
Bagaimana menghindari penggunaan ini, dan fallback ke styles.xml.?

Salam

Kalau-kalau ini membantu seseorang. Dalam kasus saya, saya tidak sengaja mengirim NaN sebagai ganti nilai warna sebenarnya yang terjadi pada saya di 'borderBottomLeftRadius' Saya tidak punya masalah dengan Iphone hanya Android.

solusi di utas ini tidak berfungsi untuk saya. Bahkan ketika menyetel underlineColorAndroid untuk semua masukan teks saya ke sesuatu yang tidak transparan (saya uji dengan '#f00' ), saya masih mengalami masalah ini.

Bagi saya masalahnya tidak terjadi secara konsisten. Saya memiliki banyak TextInputs dalam ScrollView, dan saya harus membuka dan menutup layar beberapa kali agar itu terjadi

Bukan transparansi yang menyebabkan kesalahan, melainkan perubahan file
warna asli dari prop asli bereaksi. Hanya saja hampir semua orang
membuat garis bawah asli transparan dengan penyangga.

Pada Rabu, 6 Feb 2019, 22:23 Adrien Pyke [email protected] menulis:

solusi di utas ini tidak berfungsi untuk saya. Bahkan saat mengatur
underlineColorAndroid untuk semua input teks saya ke sesuatu yang tidak transparan
(Saya menguji dengan '# f00'), saya masih mengalami masalah ini.

Bagi saya masalahnya tidak terjadi secara konsisten. Saya memiliki banyak TextInputs
dalam ScrollView, dan saya harus membuka dan menutup layar beberapa kali
untuk itu terjadi

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/facebook/react-native/issues/17530#issuecomment-461283498 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AOG_BAlfs-GKED4gOuvtKlMD0vwEH-_zks5vK6ozgaJpZM4RaUHf
.

Ok aku paham.

Hanya karena penasaran saya mencoba menghapus nilai default transparan dari sini

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

Menariknya error tersebut masih terjadi pada saya

Saya baru saja mengalami bug ini di RN 58.3 android. Tidak ada rima atau alasan yang jelas, kecuali bahwa setiap kali saya membuat komponen TextInput kesalahan akan terlempar. Bahkan jika saya membuat TextInput tanpa props atau perubahan, itu masih akan macet.

Saya mencoba memulai ulang Metro dan mengatur ulang cache tetapi tidak berhasil. Saya sebenarnya harus membuka Android Studio dan membangun kembali aplikasi, pada saat itu aplikasi mulai berfungsi. Mungkinkah ini masalah dengan gradle yang tidak menggabungkan dependensi dengan benar atau semacamnya? Sepertinya sudah lama sekali sejak saya mengembangkannya selama 4 jam tanpa memulai ulang apa pun sebelum saya mengalami masalah ini, tetapi saya benar-benar tidak dapat memikirkan apa lagi yang dapat menyebabkannya.

Saya mengalami kesalahan ini di RN 58.0 pada perangkat:
Redmi Note 6 Pro - Android 8.1
Mi A2 Lite - Android 9
WAS-LX1A - Android 8

Muncul kadang-kadang dengan melihat di Sentry, semoga membantu.

Akankah pengembang memperbaiki masalah ini? solusi tidak cocok untuk kami!

Saya memiliki hal yang sama dalam produksi

Kami memiliki pelacakan tumpukan yang sama seperti dua yang dilaporkan di atas, di React 0.59

(dengan DrawableContainerState.createAllFutures pada baris ke-2 jejak tumpukan)

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)

Saya baru saja mendapatkan stacktrace yang sama seperti di atas setelah meningkatkan versi produksi dari 0.58.6 menjadi 0.59.1 beberapa jam yang lalu. Saya khawatir ini akan menjadi masalah yang serius.

Ada solusi untuk masalah ini?

@sunnylqm adakah cara untuk menyetel underlineColorAndroid menjadi null, karena ini disetel secara default?

@pedimao @pedimao
Anda harus menghapus baris ini secara manual melalui beberapa alat tambalan seperti konfigurasi xml .
Jadi poin kuncinya adalah not set any value to underlineColorAndroid anywhere sampai beberapa pahlawan menemukan cara untuk menambal ini.

Saya mendapat kesalahan ini hari ini
Ini berfungsi dengan baik sebelumnya tetapi setelah beberapa build, kesalahan terjadi pada perangkat saya
Solusi untuk masalah ini bagi saya adalah mencopot aplikasi di perangkat kemudian menginstal ulang aplikasi melalui react-native run-android
Setelah itu masalahnya hilang

Btw saya tidak menggunakan alat peraga underlineColorAndroid, jadi tidak berfungsi apa pun yang saya setel atau tidak setel nilai apa pun untuk alat peraga itu

Ini terjadi secara acak saat Anda menggunakan beberapa input teks di dalam scrollview. underlineColorAndroid selalu digunakan karena disetel secara default .

Terjadi pada saya hari ini juga, di Expo.

Jika Anda berada di Expo, Anda harus menutup server expo, aplikasi Anda, dan aplikasi Expo sepenuhnya. Dan buka kembali.

Jika tidak, kesalahan tidak akan hilang.

Terjadi pada saya, di Expo.

Untuk beberapa alasan, ada dua contoh aplikasi saya di latar belakang. Saat saya mengklik tombol persegi android, yang disebut "Ringkasan", untuk melihat aplikasi dalam memori, saya melihat dua contoh aplikasi saya ini .. ketika saya menutupnya dan menjalankan aplikasi lagi, itu tidak menunjukkan kesalahan ini lagi.

Jadi, seperti yang orang-orang katakan sebelumnya, tutup semuanya dan jalankan lagi harus memperbaikinya

Saya menghabiskan 3 jam mencoba mencari tahu kesalahan ini tanpa hasil, kemudian saya menginstal ulang aplikasi saya di emulator android saya dan kesalahan itu hilang.

Coba 0.59.4 untuk melihat apakah Anda masih mengalami crash ini.

@sunnylqm Masih menemukan ini di 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)

Saya mengalami kesalahan ini dengan komponen yang membuat beberapa TextInputs,
Ketika saya memulai ulang build atau aplikasi itu berjalan dan itu kembali ketika saya merender untuk kedua kalinya.

Android: 9
Telepon: SAMSUNG Galaxy note 9
Model: SM-N960F / DS
react-native version "0.58.5"

Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
createAllFutures
DrawableContainer. java: 875
getOpacity
DrawableContainer. java: 1158
getOpacity
DrawableContainer. java: 433
getOpacity
InsetDrawable. java: 258
computeOpaqueFlags
Melihat. java: 18165
setBackgroundDrawable
Melihat. java: 23335
setBackground
Melihat. java: 23228

Melihat. java: 5952

TextView. java: 1108

EditText. java: 106

EditText. java: 102

EditText. java: 98

EditText. java: 94
setThemedContext
ReactTextInputShadowNode. java: 73
createView
Implementasi UII. java: 288
createView
UIManagerModule. java: 449
memohon
Method.java
memohon
JavaMethodWrapper. java: 372
memohon
JavaModuleWrApper. java: 158
Lari
NativeRunnable.java
handleCallback
Penangan. java: 873
dispatchMessage
Penangan. java: 99
dispatchMessage
MessageQueueThreadHandler. java: 29
lingkaran
Looper. java: 214
Lari
MessageQueueThreadImpl. java: 192
Lari
Benang. java: 764

Saya juga mengalami masalah yang sama pada Samsung Note 8, Android versi 9, dan React native 0.57.0

Masalah yang sama di sini. React Native 0.59.0. Masalahnya hanya muncul secara acak saat menggunakan aplikasi. Tidak dapat melihat pola apa pun untuk menampilkannya. Terjadi dalam mode pengembang dan produksi.

Masalah ini juga menyebabkan aplikasi kami mogok dalam produksi. Ini bug yang buruk, karena sangat sulit berkembang biak. Kami telah menemukan perbaikan yang menjanjikan untuk aplikasi kami, dan saya ingin membagikan temuan kami di sini untuk semoga menghemat waktu & frustrasi orang lain.

Spesifikasi dan Versi

Bug ini telah menyebabkan aplikasi kami mogok di perangkat Samsung, Google, dan LG Android. Kami mendapat laporan kerusakan dari versi Android berikut:

• 8.0.0
• 8.1.0
• 7.1.1

Aplikasi kami sedang berjalan:

• react-native : 0.53.0
• react : 16.2.0

Apa yang menyebabkan kecelakaan itu

Seperti yang telah dicatat orang lain di utas ini, masalah tampaknya dipicu oleh merender beberapa kombinasi komponen TextInput , FlatList , dan ScrollView . Dalam kasus kami, kami memiliki layar yang berisi satu TextInput diberikan di atas FlatList . Ketika salah satu item di FlatList diketuk, aplikasi menavigasi ke layar baru yang berisi formulir. Komponen root formulir ini adalah ScrollView yang berisi sejumlah TextInput komponen (bersama dengan beberapa tombol dan komponen kustom lainnya). Aplikasi kita macet saat pengguna mengetuk salah satu item FlatList (perhatikan bahwa itu tidak terjadi _every_ time).

Mereproduksi masalah ini sulit. Faktanya, kami tidak dapat melakukannya. Tapi kami tahu bahwa crash terjadi pada titik ini dalam alur kerja dengan menonton rekaman sesi Appsee kami.

Karena kami tidak dapat mereproduksi masalah, kami harus mengandalkan log kerusakan dari Appsee untuk men-debugnya. Saya telah menyalin jejak tumpukan dari laporan kerusakan di bawah (dan menghilangkan beberapa bagian yang berisik). Ini lebih atau kurang identik dengan pelacakan tumpukan yang diposting di utas ini oleh orang lain:

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)

Sumber masalahnya

Setelah membaca utas ini dan melakukan beberapa jam atau penelitian, saya menemukan penangan underlineColorAndroid prop di file ReactTextInputManager.java :

@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);
  }
}

Laporan bug yang ditautkan ke dalam komentar berisi pelacakan tumpukan berikut:

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)

Ini cocok dengan pelacakan tumpukan yang kami temui di aplikasi kami. Saya tidak berpura-pura memahami sepenuhnya masalah yang mendasarinya, tetapi tampaknya penyebab aplikasi kami mogok dalam produksi adalah karena bug Drawable.mutate() dipicu. Ini terjadi saat kita mencoba menyetel underlineColorAndroid prop pada komponen TextInput (dan dengan demikian memanggil metode ReactTextInputManager.setUnderlineColor ).

Aplikasi kami merender TextInput dengan props berikut, salah satunya adalah 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"
/>

Bagaimana kami memperbaikinya

Kami perlu menyetel properti ini untuk menghapus garis bawah dari komponen TextInput di aplikasi kami. Namun berdasarkan temuan kami, penangan prop tampaknya memicu bug Android yang menyebabkan aplikasi sesekali mogok.

Untungnya, ada cara lain untuk menghapus garis bawah dari TextInput komponen di Android. Anda dapat menambahkan baris ke file 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>

Perhatikan bahwa saya juga telah melihat saran berikut ini, tetapi ini tidak menghapus garis bawah untuk kami:

<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>

Ini tidak mengatasi masalah yang mendasarinya. Ini hanyalah solusi yang melibatkan menghindari penggunaan underlineColorAndroid prop pada TextInput komponen.

Saya belum dapat mengatakan dengan pasti bahwa ini benar-benar berfungsi, karena saya tidak dapat mereproduksi masalah secara lokal. Kami akan menerapkan perubahan ini dalam pembaruan untuk aplikasi kami dalam beberapa minggu mendatang. Setelah itu, kita harus menunggu beberapa saat untuk melihat apakah itu terjadi lagi. Saya akan mencoba melaporkan kembali dengan temuan kami.

Semoga berhasil untuk semua orang yang bergulat dengan masalah yang membuat frustrasi ini! Saya harap ini membantu.

Saya tahu bagaimana mereproduksi situasi ini. Klik kembali di formulir seperti yang Anda katakan, lalu klik item di daftar datar untuk memasukkan formulir. Ulangi sekitar sepuluh kali, dan sedikit lebih cepat, kesalahan ini akan terjadi. Anda dapat mereproduksi kesalahan sesuai dengan apa yang saya katakan.

@Tokopedia
Saya tahu bagaimana mereproduksi situasi ini. Klik kembali di formulir seperti yang Anda katakan, lalu klik item di daftar datar untuk memasukkan formulir. Ulangi sekitar sepuluh kali, dan sedikit lebih cepat, kesalahan ini akan terjadi. Anda dapat mereproduksi kesalahan sesuai dengan apa yang saya katakan.

@Tokopedia
Saya telah menghapus underlineColorAndroid, tetapi saya akan mereproduksinya.

@ react-native-bot masalah ini sangat penting

Saya menggunakan RN 59.5 dan juga mengalami masalah ini ..

Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
createAllFutures
DrawableContainer. java: 875
getOpacity
DrawableContainer. java: 1158
getOpacity
DrawableContainer. java: 433
getOpacity
InsetDrawable. java: 258
computeOpaqueFlags
Melihat. java: 16594
setBackgroundDrawable
Melihat. java: 21577
setBackground
Melihat. java: 21470

Melihat. java: 5498

TextView. java: 875

EditText. java: 88

EditText. java: 84

EditText. java: 80

EditText. java: 76
setThemedContext
ReactTextInputShadowNode. java: 76
createView
Implementasi UII. java: 294
createView
UIManagerModule. java: 462
memohon
Method.java
memohon
JavaMethodWrapper. java: 372
memohon
JavaModuleWrApper. java: 158
Lari
NativeRunnable.java
handleCallback
Penangan. java: 873
dispatchMessage
Penangan. java: 99
dispatchMessage
MessageQueueThreadHandler. java: 29
lingkaran
Looper. java: 193
Lari
MessageQueueThreadImpl. java: 232
Lari
Benang. java: 764

Adakah yang sudah memecahkan ini ?? Saya dengan masalah ini di RN 52, saya meningkatkan ke 56 tetapi masih kesalahan. Saya mencoba langkah-langkah untuk mereproduksinya, tetapi saya tidak bisa. Beberapa perangkat masih menembakkan ini secara acak.

beruntung dengan masalah ini?

saya mendapatkan masalah ini RN 0.59.5

Masalah ini juga menyebabkan aplikasi kami mogok dalam produksi. Ini bug yang buruk, karena sangat sulit berkembang biak. Kami telah menemukan perbaikan yang menjanjikan untuk aplikasi kami, dan saya ingin membagikan temuan kami di sini untuk semoga menghemat waktu & frustrasi orang lain.

Spesifikasi dan Versi

Bug ini telah menyebabkan aplikasi kami mogok di perangkat Samsung, Google, dan LG Android. Kami mendapat laporan kerusakan dari versi Android berikut:

• 8.0.0
• 8.1.0
• 7.1.1

Aplikasi kami sedang berjalan:

• react-native : 0.53.0
• react : 16.2.0

Apa yang menyebabkan kecelakaan itu

Seperti yang telah dicatat orang lain di utas ini, masalah tampaknya dipicu oleh merender beberapa kombinasi komponen TextInput , FlatList , dan ScrollView . Dalam kasus kami, kami memiliki layar yang berisi satu TextInput diberikan di atas FlatList . Ketika salah satu item di FlatList diketuk, aplikasi menavigasi ke layar baru yang berisi formulir. Komponen root formulir ini adalah ScrollView yang berisi sejumlah TextInput komponen (bersama dengan beberapa tombol dan komponen kustom lainnya). Aplikasi kita macet saat pengguna mengetuk salah satu item FlatList (perhatikan bahwa itu tidak terjadi _every_ time).
Mereproduksi masalah ini sulit. Faktanya, kami tidak dapat melakukannya. Tapi kami tahu bahwa crash terjadi pada titik ini dalam alur kerja dengan menonton rekaman sesi Appsee kami.
Karena kami tidak dapat mereproduksi masalah, kami harus mengandalkan log kerusakan dari Appsee untuk men-debugnya. Saya telah menyalin jejak tumpukan dari laporan kerusakan di bawah (dan menghilangkan beberapa bagian yang berisik). Ini lebih atau kurang identik dengan pelacakan tumpukan yang diposting di utas ini oleh orang lain:

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)

Sumber masalahnya

Setelah membaca utas ini dan melakukan beberapa jam atau penelitian, saya menemukan penangan underlineColorAndroid prop di file ReactTextInputManager.java :

@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);
  }
}

Laporan bug yang ditautkan ke dalam komentar berisi pelacakan tumpukan berikut:

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)

Ini cocok dengan pelacakan tumpukan yang kami temui di aplikasi kami. Saya tidak berpura-pura memahami sepenuhnya masalah yang mendasarinya, tetapi tampaknya penyebab aplikasi kami mogok dalam produksi adalah karena bug Drawable.mutate() dipicu. Ini terjadi saat kita mencoba menyetel underlineColorAndroid prop pada komponen TextInput (dan dengan demikian memanggil metode ReactTextInputManager.setUnderlineColor ).
Aplikasi kami merender TextInput dengan props berikut, salah satunya adalah 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"
/>

Bagaimana kami memperbaikinya

Kami perlu menyetel properti ini untuk menghapus garis bawah dari komponen TextInput di aplikasi kami. Namun berdasarkan temuan kami, penangan prop tampaknya memicu bug Android yang menyebabkan aplikasi sesekali mogok.
Untungnya, ada cara lain untuk menghapus garis bawah dari TextInput komponen di Android. Anda dapat menambahkan baris ke file 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>

Perhatikan bahwa saya juga telah melihat saran berikut ini, tetapi ini tidak menghapus garis bawah untuk kami:

<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>

Ini tidak mengatasi masalah yang mendasarinya. Ini hanyalah solusi yang melibatkan menghindari penggunaan underlineColorAndroid prop pada TextInput komponen.
Saya belum dapat mengatakan dengan pasti bahwa ini benar-benar berfungsi, karena saya tidak dapat mereproduksi masalah secara lokal. Kami akan menerapkan perubahan ini dalam pembaruan untuk aplikasi kami dalam beberapa minggu mendatang. Setelah itu, kita harus menunggu beberapa saat untuk melihat apakah itu terjadi lagi. Saya akan mencoba melaporkan kembali dengan temuan kami.
Semoga berhasil untuk semua orang yang bergulat dengan masalah yang membuat frustrasi ini! Saya harap ini membantu.

Saya tahu bagaimana mereproduksi situasi ini. Klik kembali di formulir seperti yang Anda katakan, lalu klik item di daftar datar untuk memasukkan formulir. Ulangi sekitar sepuluh kali, dan sedikit lebih cepat, kesalahan ini akan terjadi. Anda dapat mereproduksi kesalahan sesuai dengan apa yang saya katakan.

Sepertinya ini memperbaikinya.

Bagi mereka yang bertanya-tanya bagaimana cara mereproduksi: Kami memperbanyaknya dengan menambahkan 100 <TextInput ...> s menjadi <ScrollView ...> . Pada saat itu kami dapat mereproduksi kesalahan dengan perkiraan tingkat keberhasilan 75% -90%. Cukup untuk mencoba solusi. 50 bidang tidak cukup.

@Hopding 's solusi bekerja untuk kita. Solusi "warna" alternatif yang diusulkan (oleh orang lain) tidak berhasil. Efek samping yang tidak menguntungkan dari solusi ini adalah padding dihapus dari input teks.

Sama disini.

Fatal Exception: java.lang.NullPointerException: Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
di android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
di android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
di android.view.View.computeOpaqueFlags (View.java:18188)
di android.view.View.setBackgroundDrawable (View.java:23358)
di android.view.View.setBackground (View.java:23251)
di android.view.View.(View.java:5948)
di android.widget.TextView.(TextView.java:1118)
di android.widget.EditText.(EditText.java:106)
di android.widget.EditText.(EditText.java:102)
di android.widget.EditText.(EditText.java:98)
di android.widget.EditText.(EditText.java:94)
di com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:89)
di com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:105)
di com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:65)
di com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:47)
di com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:256)
di com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute (UIViewOperationQueue.java:200)
di com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:1109)
di com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:1080)
di com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:29)
di com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreographer.java:166)
di com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame (ChoreographerCompat.java:84)
di android.view.Choreographer $ CallbackRecord.run (Choreographer.java:947)
di android.view.Choreographer.doCallbacks (Choreographer.java:761)
di android.view.Choreographer.doFrame (Choreographer.java:693)
di android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:935)
di android.os.Handler.handleCallback (Handler.java:873)
di android.os.Handler.dispatchMessage (Handler.java:99)
di android.os.Looper.loop (Looper.java:214)
di android.app.ActivityThread.main (ActivityThread.java:7045)
di java.lang.reflect.Method.invoke (Method.java)
di com.android.internal.os.RuntimeInit $ MethodAndArgsCaller.run (RuntimeInit.java:493)
di com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)

ada solusi?

Berikut adalah kode di mana kesalahan direproduksi 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,
>   }
> });
> 

Video: https://www.youtube.com/watch?v=FJ6YvXrevMQ&feature=youtu.be

Solusi tlg.

Masalah ini dibuka pada 11 Jan 2018 dan sekarang Mei 2019, mengapa tidak ada orang dari tim resmi yang mengatasinya?
FYI, solusinya tidak berfungsi.

Sama di sini 0.59.6

Fatal Exception: java.lang.NullPointerException: Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
di android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
di android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
di android.view.View.computeOpaqueFlags (View.java:18188)
di android.view.View.setBackgroundDrawable (View.java:23358)
di android.view.View.setBackground (View.java:23251)
di android.view.View. (View.java:5948)
di android.widget.TextView. (TextView.java:1118)
di android.widget.EditText. (EditText.java:106)
di android.widget.EditText. (EditText.java:102)
di android.widget.EditText. (EditText.java:98)
di android.widget.EditText. (EditText.java:94)
di com.facebook.react.views.textinput.ReactEditText. (ReactEditText.java:89)
di com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:105)
di com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:65)
di com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:47)
di com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:256)
di com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute (UIViewOperationQueue.java:200)
di com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:1109)
di com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:1080)
di com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:29)
di com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreographer.java:166)
di com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame (ChoreographerCompat.java:84)
di android.view.Choreographer $ CallbackRecord.run (Choreographer.java:947)
di android.view.Choreographer.doCallbacks (Choreographer.java:761)
di android.view.Choreographer.doFrame (Choreographer.java:693)
di android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:935)
di android.os.Handler.handleCallback (Handler.java:873)
di android.os.Handler.dispatchMessage (Handler.java:99)
di android.os.Looper.loop (Looper.java:214)
di android.app.ActivityThread.main (ActivityThread.java:7045)
di java.lang.reflect.Method.invoke (Method.java)
di com.android.internal.os.RuntimeInit $ MethodAndArgsCaller.run (RuntimeInit.java:493)
di com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)

@knspatel Solusi kami adalah melapisi layar dengan modal yang menempatkan kotak input teks di atas aslinya bersama dengan sedikit keburaman latar belakang untuk menyembuhkan efek transisi. Jika koordinat y tidak terlihat atau tidak dapat diakses, kotak input teks berada tepat di atas keyboard.

Biar saya rekap:
Poin utamanya adalah tidak menyetel nilai apa pun ke underlineColorAndroid di mana pun . Tetapi karena 0,57 underlineColorAndroid disetel secara default , jadi Anda harus menghapus baris ini secara manual melalui beberapa alat tambalan seperti
Dan jika Anda masih ingin membuat garis bawah tidak terlihat, Anda perlu menyetelnya di beberapa konfigurasi xml .

Dan inilah beberapa info yang saya temukan sejauh ini:
Sebuah blog berbahasa Mandarin (dapat mencoba google translate jika Anda tidak dapat membaca) menyebutkan masalah yang sangat mirip dengan yang satu ini. Dikatakan beberapa kelas drawable kustom tanpa implementasi getConstantState dapat menyebabkan crash dalam beberapa skenario.

Saya menemukan bahwa terkadang textinput (ReactEditText) akan dibuat ulang (lebih banyak textinput lebih banyak kemungkinan, jenis daur ulang?), Dan itu akan menjadi setBackground lagi, yang kemudian masuk ke https://github.com/aosp-mirror/ platform_frameworks_base / blob / master / graphics / java / android / graphics / drawable / DrawableContainer.java # L922 , dengan ConstantState nol.

Satu-satunya kelas drawable khusus yang saya temukan adalah getConstantState yang akan mengembalikan null secara default.
Saya mencoba menimpanya dengan beberapa kelas kosong dan itu dapat membuat perbedaan (kerusakan ini hilang sementara yang lain muncul).

Semoga ini bisa membantu seseorang untuk menggali lebih banyak.

Saya menemukan pengujian manual sangat untung-untungan, jadi saya menulis komponen untuk secara otomatis menguji beberapa skenario yang telah dilaporkan orang di atas. Anda akan menemukan komponen di bawah ini. Anda hanya perlu merendernya di suatu tempat agar dapat melakukan tugasnya.

Melakukan ini saya menemukan bahwa Anda hanya perlu menambahkan yang berikut ini ke AppTheme di styles.xml seperti yang disarankan oleh @Hopding
<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

Tidak ada lagi yang dibutuhkan, dan _tidak perlu_ untuk menghindari pengaturan underlineColorAndroid , jadi tidak masalah jika React Native sekarang mengaturnya secara default.

Kelemahan utama dari perbaikan ini adalah Anda harus menata ulang TextInputs untuk memungkinkan hilangnya padding, dan Anda juga kehilangan perilaku menggarisbawahi yang sebenarnya, yang bagi kami merupakan keuntungan karena kami selalu menetapkannya "transparan" agar konsisten dengan iOS. Jika Anda membutuhkannya, Anda dapat membuat komponen pembungkus yang menampilkan onFocus dan onBlur dan membuat garis bawah Anda sendiri.

Versi React Native saya adalah 0.57.3

Berikut beberapa hal lain yang saya temukan menggunakan komponen pengujian saya:

1. Saya tidak bisa menyebabkan crash sama sekali pada perangkat tablet android spesifikasi rendah saya. Sangat mudah untuk mereproduksi namun pada ponsel Samsung S6 Edge saya yang menjalankan Android 7. Dugaan saya adalah ada kondisi balapan yang membutuhkan perangkat yang lebih cepat untuk memprovokasi itu.
2. Menggulir input teks tidak membuat perbedaan, dan saya dapat dengan mudah mereproduksi masalah bahkan tanpa menggunakan ScrollView.
3. Memasukkan teks tidak perlu. Mengubah fokus saja sudah cukup untuk menyebabkan crash.
4. Tidak ada bedanya warna apa yang Anda setel garis bawahnya, bahkan undefined menyebabkan crash, tetapi Anda mungkin berharap bahwa karena RN sekarang defaultnya ke "transparent"
5. Memiliki cukup banyak TextInput yang ditampilkan sekaligus membuat perbedaan dengan kemacetan terjadi lebih cepat dengan 100, daripada hanya 10 di layar.
6. Saya tidak bisa mereproduksi crash dengan displayForMs: 0 menyarankan bahwa itu hanya terjadi ketika TextInputs baru saja dibuat.

Jika Anda tidak ingin berkeliaran saat pengujian, Anda dapat menangkap output adb logcat dan mencari pesan konsol yang dihasilkan oleh komponen dan laporan kerusakan.

Berikut adalah komponen pengujian saya jika Anda ingin menggunakannya. Parameter pengujian disetel untuk menyebabkan crash biasanya dalam waktu kurang dari 30 detik untuk saya.

/**
 * 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;

Untuk semua yang mencari solusi, saya juga dapat mengonfirmasi pengaturan itu@android : warna / transparan di styles.xml memperbaiki masalah tersebut.

FYI: Kami menggunakan React-Native Paper dan komponen TextInput mereka dan kami dapat dengan aman menyetel <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> tanpa efek apa pun ke RN-Paper TextInput dan tidak mengalami crash lagi sejak saat itu.

Melihat produksi pada 0.59.9 .

Crashlytics:

Samsung Galaxy S7 Edge
Android 8.0

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

Mengubah ini:

state = {
  data: []
}

untuk ini:

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

memperbaiki masalah untuk saya. Tidak yakin mengapa karena menetapkan status sebagai variabel kelas harusnya oke? Siapa saja?

@wbodron Tidak, itu tidak terkait. Kecelakaan itu acak sehingga Anda mungkin mengira itu hilang tetapi sebenarnya tidak. Dan poin utama yang telah saya jelaskan di atas https://github.com/facebook/react-native/issues/17530#issuecomment -500865260

cc @cpojer @shergin @sahrens

Hapus folder build dari android.
Proyek_Anda> android> app> build

Setelah menghapusnya, jalankan react-native run-android

harus bekerja dengan baik.
Bekerja untuk saya: D

Saya sudah mencoba ini dan menghapus underlineColorAndroid tetapi masih dengan masalah. Adakah yang punya solusi lain?

Masalah ini juga menyebabkan aplikasi kami mogok dalam produksi. Ini bug yang buruk, karena sangat sulit berkembang biak. Kami telah menemukan perbaikan yang menjanjikan untuk aplikasi kami, dan saya ingin membagikan temuan kami di sini untuk semoga menghemat waktu & frustrasi orang lain.

Spesifikasi dan Versi

Bug ini telah menyebabkan aplikasi kami mogok di perangkat Samsung, Google, dan LG Android. Kami mendapat laporan kerusakan dari versi Android berikut:

• 8.0.0
• 8.1.0
• 7.1.1

Aplikasi kami sedang berjalan:

• react-native : 0.53.0
• react : 16.2.0

Apa yang menyebabkan kecelakaan itu

Seperti yang telah dicatat orang lain di utas ini, masalah tampaknya dipicu oleh merender beberapa kombinasi komponen TextInput , FlatList , dan ScrollView . Dalam kasus kami, kami memiliki layar yang berisi satu TextInput diberikan di atas FlatList . Ketika salah satu item di FlatList diketuk, aplikasi menavigasi ke layar baru yang berisi formulir. Komponen root formulir ini adalah ScrollView yang berisi sejumlah TextInput komponen (bersama dengan beberapa tombol dan komponen kustom lainnya). Aplikasi kita macet saat pengguna mengetuk salah satu item FlatList (perhatikan bahwa itu tidak terjadi _every_ time).
Mereproduksi masalah ini sulit. Faktanya, kami tidak dapat melakukannya. Tapi kami tahu bahwa crash terjadi pada titik ini dalam alur kerja dengan menonton rekaman sesi Appsee kami.
Karena kami tidak dapat mereproduksi masalah, kami harus mengandalkan log kerusakan dari Appsee untuk men-debugnya. Saya telah menyalin jejak tumpukan dari laporan kerusakan di bawah (dan menghilangkan beberapa bagian yang berisik). Ini lebih atau kurang identik dengan pelacakan tumpukan yang diposting di utas ini oleh orang lain:

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)

Sumber masalahnya

Setelah membaca utas ini dan melakukan beberapa jam atau penelitian, saya menemukan penangan underlineColorAndroid prop di file ReactTextInputManager.java :

@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);
  }
}

Laporan bug yang ditautkan ke dalam komentar berisi pelacakan tumpukan berikut:

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)

Ini cocok dengan pelacakan tumpukan yang kami temui di aplikasi kami. Saya tidak berpura-pura memahami sepenuhnya masalah yang mendasarinya, tetapi tampaknya penyebab aplikasi kami mogok dalam produksi adalah karena bug Drawable.mutate() dipicu. Ini terjadi saat kita mencoba menyetel underlineColorAndroid prop pada komponen TextInput (dan dengan demikian memanggil metode ReactTextInputManager.setUnderlineColor ).
Aplikasi kami merender TextInput dengan props berikut, salah satunya adalah 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"
/>

Bagaimana kami memperbaikinya

Kami perlu menyetel properti ini untuk menghapus garis bawah dari komponen TextInput di aplikasi kami. Namun berdasarkan temuan kami, penangan prop tampaknya memicu bug Android yang menyebabkan aplikasi sesekali mogok.
Untungnya, ada cara lain untuk menghapus garis bawah dari TextInput komponen di Android. Anda dapat menambahkan baris ke file 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>

Perhatikan bahwa saya juga telah melihat saran berikut ini, tetapi ini tidak menghapus garis bawah untuk kami:

<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>

Ini tidak mengatasi masalah yang mendasarinya. Ini hanyalah solusi yang melibatkan menghindari penggunaan underlineColorAndroid prop pada TextInput komponen.
Saya belum dapat mengatakan dengan pasti bahwa ini benar-benar berfungsi, karena saya tidak dapat mereproduksi masalah secara lokal. Kami akan menerapkan perubahan ini dalam pembaruan untuk aplikasi kami dalam beberapa minggu mendatang. Setelah itu, kita harus menunggu beberapa saat untuk melihat apakah itu terjadi lagi. Saya akan mencoba melaporkan kembali dengan temuan kami.
Semoga berhasil untuk semua orang yang bergulat dengan masalah yang membuat frustrasi ini! Saya harap ini membantu.

Saya tahu bagaimana mereproduksi situasi ini. Klik kembali di formulir seperti yang Anda katakan, lalu klik item di daftar datar untuk memasukkan formulir. Ulangi sekitar sepuluh kali, dan sedikit lebih cepat, kesalahan ini akan terjadi. Anda dapat mereproduksi kesalahan sesuai dengan apa yang saya katakan.

apa yang dapat saya? Saya menghadapi masalah ini juga!

sama disini. Menghadapi itu dalam produksi

@ jake41 Saya mencoba memulai ulang dan berhasil,

@agrass Saya akan mencoba metode Anda. Terlihat menjanjikan.
Namun, aplikasi saya sangat jarang mogok karena penyebab ini. Apakah masalah ini membuat aplikasi macet setiap saat? atau terkadang?
DAU aplikasi kami sekitar 8k, dan ini terjadi kira-kira sekali sehari. Jadi, ini bisa diabaikan, tapi saya berharap bisa menyembuhkan kecelakaan itu.

Apakah ada yang menemukan perbaikan yang tepat untuk itu? Ini sangat jarang terjadi dan hanya pada komponen yang terdapat bidang teks.

Masalah masih berlanjut dengan React Native 0.60

React Native: 0.59.8
Android: 8.1.0
Perangkat: 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)

Punya masalah yang sama di sini
RN: 0,59,9
Perangkat: Pixel 2
Android: 9.0

Jika ini adalah layar formulir, Anda mungkin menunggu untuk menentukan nilai dalam input, itu berhasil untuk saya.

Saya menemukan solusi. Tidak yakin apakah itu jangka panjang, tetapi ini akan membiarkan kalian bekerja sampai solusi permanen ditemukan.
Cukup kosongkan uang Anda: npm start - --reset-cache
Dan mulai ulang proyek tersebut.
Itu berhasil untuk saya.
FYI, saya belum mengeluarkan proyek saya.
Dependensi saya:

"devDependencies": {
"@ types / react": "^ 16.8.23",
"@ types / react-native": "^ 0,57.65",
"babel-preset-expo": "^ 6.0.0",
"skrip ketikan": "^ 3.4.5"
},

Pengguna ExpoKit (SDK 34) menimbang di sini. Saya mengalami masalah ini di semua versi ExpoKit, termasuk yang terbaru. Saya sudah mencoba menerapkan perbaikan ini, dengan beberapa modifikasi, dan sejauh ini, sangat bagus.

Perubahan gaya akhirnya menjadi sedikit berbeda pada @Hopding - pada dasarnya kebalikannya berhasil bagi saya. Saya mengubah ExponentEditText style di styles.xml seperti:

<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>

karena perubahan ke android:editTextBackground tidak berhasil (mungkin ada hubungannya dengan gaya ExponentEditText yang sudah ada). Menariknya, saya tidak perlu menambal pengaturan prop default dari underlineColorAndroid menjadi transparent . Saya memang memiliki masalah bantalan; namun saya merasa ini sebenarnya adalah peningkatan, karena saya tidak lagi harus berurusan dengan padding intrinsik dari TextInput ketika kosong dan saya mencoba memposisikan komponen lain di dekatnya.

Sebelumnya, saya dapat memicu kesalahan dengan andal melalui tombol diagnostik yang saya tambahkan ke aplikasi kami yang menambahkan 500 TextInputs ke SectionList. Saya akan mengatakan itu memicu 60% dari waktu pada percobaan pertama, 90% pada percobaan kedua, dan 100% pada percobaan ketiga menurut pengalaman saya. Sudah mencobanya setidaknya 10 kali tanpa kesalahan setelah saya melakukan perubahan.

Punya masalah yang sama di sini
RN: 0,55,4
Perangkat: MI 8 Lite
Android: 8.1.0

java.lang.NullPointerException: Mencoba memanggil metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
di android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
di android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
di android.view.View.computeOpaqueFlags (View.java:15748)
di android.view.View.setBackgroundDrawable (View.java:20558)
di android.view.View.setBackground (View.java:20451)
di android.view.View.(View.java:5255)
di android.widget.TextView.(TextView.java:826)
di android.widget.EditText.(EditText.java:88)
di android.widget.EditText.(EditText.java:84)
di android.widget.EditText.(EditText.java:80)
di android.widget.EditText.(EditText.java:76)
di com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext (ReactTextInputShadowNode.java:80)
di com.facebook.react.uimanager.UIImplementation.createView (UIImplementation.java:282)
di com.facebook.react.uimanager.UIManagerModule.createView (UIManagerModule.java:366)
di java.lang.reflect.Method.invoke (Method.java)
di com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
di com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:160)
di com.facebook.react.bridge.queue.NativeRunnable.run (NativeRunnable.java)
di android.os.Handler.handleCallback (Handler.java:790)
di android.os.Handler.dispatchMessage (Handler.java:99)
di com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:29)
di android.os.Looper.loop (Looper.java:164)
di com.facebook.react.bridge.queue.MessageQueueThreadImpl $ 3. jalankan (MessageQueueThreadImpl.java:192)
di java.lang.Thread.run (Thread.java:764)

Pengecualian Fatal: java.lang.NullPointerException
Mencoba menjalankan metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null

vivo 1804
Versi Android: 9

Terjadi untuk saya. React Native versi 0.60.4 berjalan di Android 9. Meskipun sangat jarang dan jarang terjadi.

Terjadi untuk saya. React Native versi 0.60.4 berjalan di Android 9. Meskipun sangat jarang dan jarang terjadi.

Sama saya juga...

Sama di sini, React Native 0.60.4 di Android 9

Saya menggunakan React Native dengan Expo, dan mengalami masalah ini pagi ini.
Saya mencoba untuk meletakkan baris ini di AppTheme styles.xml saya seperti ini

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

Tidak berhasil, jadi saya mencari tempat lain, dan akhirnya menaruhnya di sana:

<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>

Sepertinya bekerja dengan baik sekarang

Kecelakaan ini sangat acak. Pelacakan tumpukan yang sama, v0.60.4. Kesalahan yang sama. Apakah ada solusinya? Seseorang menyarankan untuk menghapus folder build tetapi saya tidak melihat apa hubungannya dengan pointer nol? Solusinya sepertinya selalu membangun kembali / menjalankan kembali

@armagedan @jacobbeasley dkk masalah _is_ terputus-putus jadi Anda mungkin ingin mencoba komponen drop-in yang disediakan dalam komentar saya di atas untuk mereproduksinya. Komentar itu juga memberikan analisis masalah dan solusi yang berhasil untuk saya dan banyak orang lainnya.

@wxjer saya mencoba menghapus data aplikasi pada pengaturan dan berfungsi! bisakah kamu mencobanya

Sama di sini, React Native 0.60.4 di Android 9 dan Android 8

Ada solusi?

Jika ada yang memperhatikan Android debugging, inilah kesalahan penjaga kami yang baru saja dilaporkan.

react-native 0.60.4

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

Sama di sini, React Native 0.60.5 di Android 9

Halo! Kami menyelesaikan ini dengan menghapus properti underlineColorAndroid dari TextInput kami dan menambahkan baris ini ke styles.xml di dalam (android / src / main / res / values ​​/ styles.xml)

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

Apakah ini laporan bug?

Iya

Sudahkah Anda membaca Panduan Berkontribusi ?

ya, saya minta maaf karena saya tidak dapat menawarkan informasi lebih lanjut tentang pengecualian ini kecuali untuk pelacakan tumpukan ini karena laporan kerusakan dikumpulkan dari google analytics, saya tidak tahu untuk memunculkan kembali pengecualian ini.

Lingkungan Hidup

Lingkungan Hidup:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Benang: 0.27.5
npm: 5.4.0
Android Studio: 3.0

Paket: (ingin => dipasang)
react-native: 0.51.0 => 0.51.0
bereaksi: 16.0.0-alpha.12 => 16.0.0-alpha.12

Platform Target: Android (7.1.1)
seluler: MIX 2
android: 7.1.1
java.lang.NullPointerException:
menggoda untuk memanggil metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null di
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild (DrawableContainer.java:888) di
android.graphics.drawable.DrawableContainer.selectDrawable (DrawableContainer.java:466) di
android.graphics.drawable.StateListDrawable.onStateChange (StateListDrawable.java:104) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.graphics.drawable.DrawableWrapper.onStateChange (DrawableWrapper.java:331) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.graphics.drawable.LayerDrawable.onStateChange (LayerDrawable.java:1488) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.view.View.drawableStateChanged (View.java:18002) di
android.widget.TextView.drawableStateChanged (TextView.java:4097) di
android.view.View.refreshDrawableState (View.java:18071) di
android.view.View.setPressed (View.java:8543) di
android.view.View.setPressed (View.java:8521) di
android.view.View.onTouchEvent (View.java:11218) di
android.widget.TextView.onTouchEvent (TextView.java:8467) di
com.facebook.react.views.textinput.ReactEditText.onTouchEvent (ReactEditText.java:150)

react-native 0.60.4 saya juga

Mulai mengalami crash ini baru-baru ini, RN 0.60.5, terutama di Android 8/9 (mungkin 10 juga, belum mengujinya secara ekstensif).

https://github.com/facebook/react-native/issues/17530#issuecomment -504044357 sepertinya berhasil untuk saya. Biasanya, crash akan muncul dengan sendirinya dalam ~ 5 iterasi pertama yang dilalui komponen pengujian. Setelah menambahkan satu baris, itu berjalan untuk ~ 200 iterasi tanpa crash sebelum saya menghentikannya.

sunting: Dengan menggunakan komponen pengujian, saya dapat mereproduksi ini dengan andal di Android 6 juga, meskipun sekali lagi perbaikan yang disarankan tampaknya menyelesaikan masalah.

Sama di sini di RN 0.61

Hai teman-teman, solusi @diegotsi berhasil untuk saya. Saya belum pernah melihat crash sejak saya menggunakan solusinya

Masalah ini masih ada dan itu merusak aplikasi saya - semuanya bekerja dengan baik daripada saya menambahkan panggilan pengambilan dan sekarang bahkan ketika saya berkomentar, saya tidak bisa menjalankan aplikasi lagi: cry: Saya menggunakan Expo btw

EDIT: Saya memperbaiki masalah saya untuk expo dengan menginstal ulang aplikasi expo di perangkat saya

Terjadi kesalahan ini juga (RN: 0.61.1, Android 10 api 29). 'npm start --reset-cache' tampaknya diperbaiki.

@johnbowdenatfacet Anda mungkin ingin mencoba komponen uji drop-in yang disediakan dalam komentar saya di atas untuk mengonfirmasi perbaikan.

Masalah yang sama.

React-Native 0.59.10
Android

java.lang.NullPointerException: Mencoba memanggil metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
di android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
di android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
di android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)

Masalah yang sama.

Halo! Kami menyelesaikan ini dengan menghapus properti underlineColorAndroid dari TextInput kami dan menambahkan baris ini ke styles.xml di dalam (android / src / main / res / values ​​/ styles.xml)

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

Memecahkan masalah saya, Terima kasih banyak.

Saya baru saja menjalankan (react-native run-android), yang memecahkan masalah saya

Masalah yang sama di 0.61.3

Saya masih menghadapi masalah ini. Kami memiliki beberapa pengguna yang melaporkan aplikasi Android mogok, tetapi ini terjadi secara acak sehingga saya tidak dapat mereproduksi.

+1, selamat untuk saya juga

@pedrosimao Anda mungkin ingin mencoba komponen uji masuk yang disediakan dalam komentar saya di atas untuk mereproduksi kesalahan dengan andal. Komentar itu juga menunjukkan perbaikan untuk masalah tersebut.

Saya mempersempit masalah masukannya untuk saya yang diimpor dari basis asli.

Diperbarui:
Saya me-restart PC dan telepon saya dan kemudian menjalankan lagi, Ini berfungsi seperti pesona :)

Saya punya ini juga. Saya telah menyelesaikan masalah ini dengan menjalankan kembali pameran melalui expo r -c

Melaporkan masalah yang sama untuk RN 0.59.10

Saya menemukan pengujian manual sangat untung-untungan, jadi saya menulis komponen untuk secara otomatis menguji beberapa skenario yang telah dilaporkan orang di atas. Anda akan menemukan komponen di bawah ini. Anda hanya perlu merendernya di suatu tempat agar dapat melakukan tugasnya.

Melakukan ini saya menemukan bahwa Anda hanya perlu menambahkan yang berikut ini ke AppTheme di styles.xml seperti yang disarankan oleh @Hopding
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

Tidak ada lagi yang dibutuhkan, dan _tidak perlu_ untuk menghindari pengaturan underlineColorAndroid , jadi tidak masalah jika React Native sekarang mengaturnya secara default.

Kelemahan utama dari perbaikan ini adalah Anda harus menata ulang TextInputs untuk memungkinkan hilangnya padding, dan Anda juga kehilangan perilaku menggarisbawahi yang sebenarnya, yang bagi kami merupakan keuntungan karena kami selalu menetapkannya "transparan" agar konsisten dengan iOS. Jika Anda membutuhkannya, Anda dapat membuat komponen pembungkus yang menampilkan onFocus dan onBlur dan membuat garis bawah Anda sendiri.

Versi React Native saya adalah 0.57.3

Berikut beberapa hal lain yang saya temukan menggunakan komponen pengujian saya:

1. Saya tidak bisa menyebabkan crash sama sekali pada perangkat tablet android spesifikasi rendah saya. Sangat mudah untuk mereproduksi namun pada ponsel Samsung S6 Edge saya yang menjalankan Android 7. Dugaan saya adalah ada kondisi balapan yang membutuhkan perangkat yang lebih cepat untuk memprovokasi itu.
2. Menggulir input teks tidak membuat perbedaan, dan saya dapat dengan mudah mereproduksi masalah bahkan tanpa menggunakan ScrollView.
3. Memasukkan teks tidak perlu. Mengubah fokus saja sudah cukup untuk menyebabkan crash.
4. Tidak ada bedanya warna apa yang Anda setel garis bawahnya, bahkan undefined menyebabkan crash, tetapi Anda mungkin berharap bahwa karena RN sekarang defaultnya ke "transparent"
5. Memiliki cukup banyak TextInput yang ditampilkan sekaligus membuat perbedaan dengan kemacetan terjadi lebih cepat dengan 100, daripada hanya 10 di layar.
6. Saya tidak bisa mereproduksi crash dengan displayForMs: 0 menyarankan bahwa itu hanya terjadi ketika TextInputs baru saja dibuat.

Jika Anda tidak ingin berkeliaran saat pengujian, Anda dapat menangkap output adb logcat dan mencari pesan konsol yang dihasilkan oleh komponen dan laporan kerusakan.

Berikut adalah komponen pengujian saya jika Anda ingin menggunakannya. Parameter pengujian disetel untuk menyebabkan crash biasanya dalam waktu kurang dari 30 detik untuk saya.

/**
 * 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;

Sudah mencoba ini tetapi Keyboard tidak muncul di TextInputs. Ada solusi?

Terima kasih telah mencoba komponen saya @saketkumar.

Saya tidak dapat mengingat apakah keyboard perlu muncul untuk tes ini, meskipun saya mengharapkannya muncul saat input teks difokuskan. Apakah Anda menggunakan perangkat sebenarnya atau emulator?

Dapatkah Anda melihat kursor muncul di input teks karena difokuskan, dan apakah komponen tersebut dapat mereproduksi error untuk Anda?

Sama

Terjadi di reaksi 0,59 pada Ragam ponsel Android.

Terjadi secara acak dalam komponen dengan TextInput bertingkat dalam Flatlist

Mencoba menyetel underlineColorAndroid={null} atrribute pada TextInput seperti yang dibahas di utas ini tetapi kesalahan tetap ada

Saya harus me-restart telepon saya dan menginstal ulang EXPO agar bisa diperbaiki. Jika itu tidak berhasil untuk Anda, saya akan mencoba membersihkan cache Anda dan membersihkan cache dari EXPO APP itu sendiri.

Tidak tahu bagaimana ERROR itu bisa terjadi. Saya tidak dapat membuat ulang atau mencari cara untuk mencegah hal itu terjadi lagi.
Ini baru saja dimulai dan tidak peduli apa yang saya ubah dalam kode saya, itu tidak memperbaikinya. Ini pasti masalah dengan EXPO APP karena saya melihat KESALAHAN di APP tetapi tidak di konsol saya atau di mana pun.

Kesalahan +1 masih ada di RN 0.59.9. dilaporkan dari firebase crashlytics

yang pertama mendapatkan kesalahan ini pada RN 0,61?

Mendapatkan kesalahan yang sama di RN 0,61, solusi @diegotsi memperbaikinya.
Ini adalah masalah serius, seperti yang pertama kali terjadi pada saya di lingkungan pra-produksi, dan saya tidak akan pernah bisa melacaknya tanpa crashlytics, karena perilaku yang tidak menentu membuatnya sulit untuk direproduksi.

Apakah ini laporan bug?

Iya

Sudahkah Anda membaca Panduan Berkontribusi ?

ya, saya minta maaf karena saya tidak dapat menawarkan informasi lebih lanjut tentang pengecualian ini kecuali untuk pelacakan tumpukan ini karena laporan kerusakan dikumpulkan dari google analytics, saya tidak tahu untuk memunculkan kembali pengecualian ini.

Lingkungan Hidup

Lingkungan Hidup:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Benang: 0.27.5
npm: 5.4.0
Android Studio: 3.0

Paket: (ingin => dipasang)
react-native: 0.51.0 => 0.51.0
bereaksi: 16.0.0-alpha.12 => 16.0.0-alpha.12

Platform Target: Android (7.1.1)
seluler: MIX 2
android: 7.1.1
java.lang.NullPointerException:
menggoda untuk memanggil metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null di
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild (DrawableContainer.java:888) di
android.graphics.drawable.DrawableContainer.selectDrawable (DrawableContainer.java:466) di
android.graphics.drawable.StateListDrawable.onStateChange (StateListDrawable.java:104) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.graphics.drawable.DrawableWrapper.onStateChange (DrawableWrapper.java:331) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.graphics.drawable.LayerDrawable.onStateChange (LayerDrawable.java:1488) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.view.View.drawableStateChanged (View.java:18002) di
android.widget.TextView.drawableStateChanged (TextView.java:4097) di
android.view.View.refreshDrawableState (View.java:18071) di
android.view.View.setPressed (View.java:8543) di
android.view.View.setPressed (View.java:8521) di
android.view.View.onTouchEvent (View.java:11218) di
android.widget.TextView.onTouchEvent (TextView.java:8467) di
com.facebook.react.views.textinput.ReactEditText.onTouchEvent (ReactEditText.java:150)

Apakah ini laporan bug?

Iya

Sudahkah Anda membaca Panduan Berkontribusi ?

ya, saya minta maaf karena saya tidak dapat menawarkan informasi lebih lanjut tentang pengecualian ini kecuali untuk pelacakan tumpukan ini karena laporan kerusakan dikumpulkan dari google analytics, saya tidak tahu untuk memunculkan kembali pengecualian ini.

Lingkungan Hidup

Lingkungan Hidup:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Benang: 0.27.5
npm: 5.4.0
Android Studio: 3.0

Paket: (ingin => dipasang)
react-native: 0.51.0 => 0.51.0
bereaksi: 16.0.0-alpha.12 => 16.0.0-alpha.12

Platform Target: Android (7.1.1)
seluler: MIX 2
android: 7.1.1
java.lang.NullPointerException:
menggoda untuk memanggil metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null di
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild (DrawableContainer.java:888) di
android.graphics.drawable.DrawableContainer.selectDrawable (DrawableContainer.java:466) di
android.graphics.drawable.StateListDrawable.onStateChange (StateListDrawable.java:104) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.graphics.drawable.DrawableWrapper.onStateChange (DrawableWrapper.java:331) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.graphics.drawable.LayerDrawable.onStateChange (LayerDrawable.java:1488) di
android.graphics.drawable.Drawable.setState (Drawable.java:735) di
android.view.View.drawableStateChanged (View.java:18002) di
android.widget.TextView.drawableStateChanged (TextView.java:4097) di
android.view.View.refreshDrawableState (View.java:18071) di
android.view.View.setPressed (View.java:8543) di
android.view.View.setPressed (View.java:8521) di
android.view.View.onTouchEvent (View.java:11218) di
android.widget.TextView.onTouchEvent (TextView.java:8467) di
com.facebook.react.views.textinput.ReactEditText.onTouchEvent (ReactEditText.java:150)

Ini terjadi ketika saya mengubah sesuatu dengan gaya seperti menghapus justifyContent atau smthng seperti ini dan memulai ulang aplikasi berfungsi untuk sementara.

@cinocai , @Sargnec dkk, utas komentar ini semakin lama sehingga saya pikir orang-orang melewatkan komponen pengujian yang saya posting di atas

Beberapa orang di atas telah menggunakannya untuk berhasil mereproduksi masalah ini, dan memverifikasi solusinya, yang juga disebutkan dalam komentar itu.

@ glenn-axsy: Kerja bagus dengan komponen pengujian, sangat membantu memahami masalah dengan lebih baik.
Tetapi saya berjuang untuk menemukan solusi.

Seperti yang Anda sarankan untuk menyetel displayForMs: 0 itu tidak macet. Jika saya tidak salah, dengan melakukan itu, 100 TextInputs tidak pernah dilepas (hanya pembaruan), tidak ada yang baru juga.

Saya mencoba menyetel displayForMs: 3000 itu sendiri dan membuat 2 perubahan lainnya, yang membuat semua 100 terpasang (hanya memperbarui) pada setiap status set.

Perubahan

• kunci const = this.state.startKey + i + ""; ---> kunci const = ${i} ;
• Centang dinonaktifkan if (this.state.showInputs) { inside render.

/**
 * 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;

Kedua perubahan tersebut memastikan memanggil _showInputs dan _unshowInputs tidak akan memasang kembali TextInputs, atau memasang yang baru (maks 100).
Dan itu tidak crash seperti yang diharapkan.

Akhirnya untuk memastikan apakah itu benar-benar memasang ulang (sejumlah besar TextInput) yang menyebabkan masalah. Saya mencoba mereproduksinya di aplikasi yang sedang saya kerjakan, di mana kerusakan dilaporkan.

Di dalam aplikasi ada 2 layar, satu memiliki 2 TextInputs dan yang lainnya dengan 4, saya terus menavigasi bolak-balik layar, yang tentu saja menghitung ulang seluruh konten layar, dan akhirnya setelah beberapa saat saya bisa mengalami crash.

Dengan ini saya dapat menyimpulkan bahwa tidak membiarkan TextInput melepas bukanlah solusi yang layak. Tapi tetap tidak tahu apa sebenarnya yang menyebabkan ini!

CATATAN

• Saya tidak berpikir ini terkait dengan properti underlineColorAndroid , karena saya telah mencoba menimpanya dengan <item name="android:editTextBackground"><strong i="18">@android</strong>:color/transparent</item> , dan tidak ada perbedaan. [Diedit: Ini sebenarnya memperbaiki masalah untuk saat ini]
• Juga saya bisa mengalami crash tanpa menggunakan ScrollView .
• Dan memfokuskan TextInput juga tidak diperlukan untuk membuat crash, cukup dengan memasang kembali 100 TextInputs yang mengakibatkan crash.

Terima kasih!

@rimici Ya itu benar. Kerusakan terkait dengan memasang kembali / membuat instance teks editan, terkadang gambar latar belakang dapat digambar dengan null. Tapi anehnya, ketika Anda menetapkan <item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> itu tidak akan terjadi. Tampaknya drawable entah bagaimana didaur ulang setelah kloning dan ketika disetel latar belakangnya dapat memiliki nilai default?

Terima kasih @rimzici.

Sungguh mengecewakan mendengar bahwa hanya dengan menyetel <item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> tidak memperbaikinya untuk Anda. Setidaknya Anda memiliki cara untuk mereproduksi kesalahan dengan mudah sekarang dan dapat mencoba beberapa hal lain.

Silakan posting pengamatan lebih lanjut yang mungkin Anda miliki.

Terima kasih @sunnylqm dan @ glenn-axsy! Anda benar, menyetel <item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> memang benar.

Saya lupa bahwa saya memiliki tema splash yang disetel pada Aktivitas Utama saya, untuk menutupi layar putih saat JS memuat.

Sekarang saya dapat mengonfirmasi bahwa pekerjaan di sekitar efektif dalam mencegah crash.

Akan memperbarui dengan informasi lebih lanjut.

react-native 0.61.5 <- juga ada di sini!

react-native 0.62.0.rc-1 <- juga ada di sini!

Kesalahan yang sama pada [email protected]

Menekan banyak kejadian kesalahan yang sama tertangkap oleh Sentry: https://sentry.io/share/issue/ac1e7c55f1594b118f0faaf8d11de5c4/

Pada RN 0.59.9

Kesalahan yang sama pada RN 0.55.4

Masalah yang sama di RN 2.0.1

jangan setel props 'underlineColorAndroid' ke TextInput mana pun dan hapus semua latar belakang input teks dengan gaya bawaan.

buka android \ app \ src \ main \ res \ values ​​\ styles.xml

ubah seperti di bawah ini:

Sama pada RN 0.61.5

Saya menemukan pengujian manual sangat untung-untungan, jadi saya menulis komponen untuk secara otomatis menguji beberapa skenario yang telah dilaporkan orang di atas. Anda akan menemukan komponen di bawah ini. Anda hanya perlu merendernya di suatu tempat agar dapat melakukan tugasnya.

Melakukan ini saya menemukan bahwa Anda hanya perlu menambahkan yang berikut ini ke AppTheme di styles.xml seperti yang disarankan oleh @Hopding
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

Tidak ada lagi yang dibutuhkan, dan _tidak perlu_ untuk menghindari pengaturan underlineColorAndroid , jadi tidak masalah jika React Native sekarang mengaturnya secara default.

Kelemahan utama dari perbaikan ini adalah Anda harus menata ulang TextInputs untuk memungkinkan hilangnya padding, dan Anda juga kehilangan perilaku menggarisbawahi yang sebenarnya, yang bagi kami merupakan keuntungan karena kami selalu menetapkannya "transparan" agar konsisten dengan iOS. Jika Anda membutuhkannya, Anda dapat membuat komponen pembungkus yang menampilkan onFocus dan onBlur dan membuat garis bawah Anda sendiri.

Versi React Native saya adalah 0.57.3

Berikut beberapa hal lain yang saya temukan menggunakan komponen pengujian saya:

1. Saya tidak bisa menyebabkan crash sama sekali pada perangkat tablet android spesifikasi rendah saya. Sangat mudah untuk mereproduksi namun pada ponsel Samsung S6 Edge saya yang menjalankan Android 7. Dugaan saya adalah ada kondisi balapan yang membutuhkan perangkat yang lebih cepat untuk memprovokasi itu.
2. Menggulir input teks tidak membuat perbedaan, dan saya dapat dengan mudah mereproduksi masalah bahkan tanpa menggunakan ScrollView.
3. Memasukkan teks tidak perlu. Mengubah fokus saja sudah cukup untuk menyebabkan crash.
4. Tidak ada bedanya warna apa yang Anda setel garis bawahnya, bahkan undefined menyebabkan crash, tetapi Anda mungkin berharap bahwa karena RN sekarang defaultnya ke "transparent"
5. Memiliki cukup banyak TextInput yang ditampilkan sekaligus membuat perbedaan dengan kemacetan terjadi lebih cepat dengan 100, daripada hanya 10 di layar.
6. Saya tidak bisa mereproduksi crash dengan displayForMs: 0 menyarankan bahwa itu hanya terjadi ketika TextInputs baru saja dibuat.

Jika Anda tidak ingin berkeliaran saat pengujian, Anda dapat menangkap output adb logcat dan mencari pesan konsol yang dihasilkan oleh komponen dan laporan kerusakan.

Berikut adalah komponen pengujian saya jika Anda ingin menggunakannya. Parameter pengujian disetel untuk menyebabkan crash biasanya dalam waktu kurang dari 30 detik untuk saya.

/**
 * 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;

Dapat mengkonfirmasi ini memperbaikinya untuk saya!

Saya senang komponen pengujian saya dan solusi yang disarankan berhasil untuk Anda @gagangoku

Bagi mereka yang ingin melihatnya dalam konteks tautannya ada di sini

Mungkin Anda akan berbaik hati menambahkan tautan itu ke komentar Anda.

Perbaikan dari @ glenn-axsy berhasil untuk saya (seperti halnya komponen pengujian 👏👏👏), tetapi saya mengalami beberapa masalah di sepanjang jalan yang dapat membantu jiwa lain yang hilang:

AppTheme saya diganti secara tidak benar di file AndroidManifest.xml , karena kesalahan yang dibuat pengembang saat menambahkan aktivitas layar splash. Setelah saya memperbaiki dan mengonfirmasi bahwa AppTheme benar-benar digunakan (misalnya dengan mengubah warna teks default dan melihatnya di aplikasi), maka perbaikan tersebut benar-benar berfungsi.

Terima kasih banyak, dan semoga sukses di luar sana!

Itu terjadi pada saya menggunakan expo. Saya menjalankan perintah ini.
sudo expo start -c dan masalah hilang.

@ HakimAsa Saya sarankan menggunakan komponen pengujian untuk memastikan itu benar-benar hilang.

Hal aneh mereka adalah bahwa kode tersebut telah berfungsi selama sebulan tanpa masalah itu. Tetapi setelah beberapa kali memuat ulang perubahan, saya mengalami masalah kemarin ... Pokoknya saya akan mencoba saran Anda @ glenn-axsy

Dalam kasus saya, itu terjadi dalam FlatList ketika renderItem mengembalikan <TextInput /> . Jadi saya memecahkan masalah itu dengan mengembalikan <><TextInput /></>

@MahmoudHemaid Masalahnya sangat sulit untuk direproduksi sehingga Anda mungkin belum menyelesaikannya. Informasi lebih lanjut di sini .

android.graphics.drawable.Drawable $ constantstate, newdrawable pada kesalahan referensi null saat saya mengklik gambar, ditempatkan di sudut paling kanan. Dan gambar itu bertindak seperti tombol sakelar. Saya menggunakan RN 0.61.2. Seseorang tolong bantu saya untuk memecahkan masalah ini. ini hanya terjadi di apk mandiri

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

Melakukan ini saya menemukan bahwa Anda hanya perlu menambahkan yang berikut ini ke AppTheme di styles.xml seperti yang disarankan oleh @Hopding

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

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

Contoh paling sederhana adalah membuat EditText dengan null AttributeSet dan tanpa (0) atribut gaya default:

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

ReactTextInput dapat diganti oleh subkelas yang ingin menyediakan turunannya sendiri dari EditText .

Konstruktor android EditText :

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

yang memanggil konstruktor View ( docs )

Saya akan terus menyelidiki. Terima kasih

Hai @ glenn-axsy, saya sudah bergumul dengan ini selama berjam-jam jadi saya sangat berharap Anda bisa membantu saya. Saya menggunakan AndroidTextInputTest Anda di ponsel android saya. Saya menjalankan React Native with Typescript jika itu penting dan melakukannya melalui Expo Ini berarti saya tidak memiliki barang jenis EditText.
React native di package.json = "react-native": "^ 0.61.4"

Saya menggunakan params:

const params = {
underlineColors: ["red", undefined, "transparent", "rgba (0, 0, 0, 0)"], // Warna yang akan diuji
numberOfInputs: 100, // Berapa banyak TextInput yang akan dirender dalam satu waktu
focusIntervalMs: 200, // Seberapa sering mengubah fokus di antara keduanya
displayForMs: 3000, // Berapa lama untuk menampilkannya (setel ke 0 untuk tidak terbatas)
delayDisplayForMs: 10, // Berapa lama waktu jeda antar tampilan
withScrollView: false, // Apakah akan menggunakan ScrollView
};

Dan keluaran saya sebelum mendapatkan "Mencoba untuk memanggil metode virtual" adalah:

Menguji dengan params = {"underlineColors": ["red", null, "transparent", "rgba (0, 0, 0, 0)"], "numberOfInputs": 100, "focusIntervalMs": 200, "displayForMs": 3000, "delayDisplayForMs": 10, "withScrollView": false}
Parameter dari calendarVisible benar dan statusnya benar
Menguji underlineColor = merah
Pengujian underlineColor = undefined
Menguji underlineColor = transparent
Pengujian underlineColor = rgba (0, 0, 0, 0)
Menguji underlineColor = merah
Pengujian underlineColor = undefined
Menguji underlineColor = transparent

Jadi pertanyaan saya dari sini adalah, bagaimana saya bisa menggunakan params ini dan output yang saya lihat sebelum crash untuk mendiagnosis apa yang salah di aplikasi saya?

Terima kasih atas bantuannya.

@ucheNkadiCode Ini adalah pengujian untuk mereproduksi masalah dengan cepat, bukan solusi. Solusinya adalah

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

@ucheNkadiCode Ini adalah pengujian untuk mereproduksi masalah dengan cepat, bukan solusi. Solusinya adalah

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

@sunnylqm Saya agak bingung karena saya menggunakan react native, jadi saya tidak menggunakan item di manapun dalam kode saya.

Saya menggunakan TextInput yang terlihat seperti ini:

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

Terima kasih

@jamur_kejang

Tapi untuk expo mungkin anda perlu mengeluarkannya dulu untuk merubah setting seperti ini

@jamur_kejang

Tapi untuk expo mungkin anda perlu mengeluarkannya dulu untuk merubah setting seperti ini

Ya, itulah yang menjadi masalahnya. Saya tidak ingin membayar harga untuk mengeluarkan aplikasi asli react saya sedini ini ke dalam pengembangannya. Saya berharap menemukan solusi yang membuat saya tetap di React Native.

Terima kasih atas bantuan Anda

@ axy-dev

komentar saya bekerja ke arah itu, untuk memperbaikinya dalam permintaan tarik untuk menghindari masalah yang terkait dengan TextInput prop underlineColorAndroid . ReactNative menyetel tema dengan cara terprogram ... harap tinjau komentar saya dan kembali kepada saya dengan beberapa umpan balik karena saya tidak dapat menyelesaikan masalah ini dan saya sedang mengerjakan permintaan tarik lainnya sekarang. Terima kasih

Saya sebenarnya dapat memecahkan masalah ini dengan menulis ulang metode react native ReactTextInput

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

Tetapi ini hanya menonaktifkan gaya yang diteruskan ke komponen EditText dengan getThemedContext()

tambahan tumpukan memberitahu kita bahwa kesalahan ini dipicu oleh ReactEditText.onTouchEvent , jadi ketika pengguna menyentuh komponen TextInput .

komentar saya bekerja ke arah itu, untuk memperbaikinya dalam permintaan tarik untuk menghindari masalah yang terkait dengan TextInput prop underlineColorAndroid . ReactNative menyetel tema dengan cara terprogram ... harap tinjau komentar saya dan kembali kepada saya dengan beberapa umpan balik karena saya tidak dapat menyelesaikan masalah ini dan saya sedang mengerjakan permintaan penarikan lainnya sekarang.

Saya sebenarnya dapat memecahkan masalah ini dengan menulis ulang metode react native ReactTextInput

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

Tetapi ini hanya menonaktifkan gaya yang diteruskan ke komponen EditText dengan getThemedContext()

tambahan tumpukan memberitahu kita bahwa kesalahan ini dipicu oleh ReactEditText.onTouchEvent , jadi ketika pengguna menyentuh komponen TextInput .

@ axy-dev @ fabriziobertoglio1987. Jadi saya tidak memiliki elemen yang dapat saya temukan di direktori proyek saya dengan ReactEditText dan saya juga tidak memiliki file .java di direktori saya. Saya menggunakan TypeScript dengan React native sehingga sebagian besar file saya adalah .tsx atau .ts dengan pengecualian banyak node_modules.

Sayangnya saya tidak menggunakan Android Asli.

@ucheNkadiCode untuk menyelesaikan ini sekarang Anda perlu mengeluarkan, jika tidak buat ulang skenario ini secara reactnative, tulis permintaan tarik, itu akan digabungkan dalam react-native lalu kemudian expo.

@ucheNkadiCode Saya khawatir saya tidak menggunakan Expo, tapi sepertinya @sunnylqm tahu apa yang dia bicarakan

Saya baru saja menghadapi masalah yang sama di expo.
Saya mencoba: watchman watch-del-all && expo r -c
tapi sekarang masih kabar baik.

Saya menghadapi masalah yang sama, yang hilang jika saya mengubah TextInput saya menjadi teks.

Komentar dari 2 tahun yang lalu ini masih berlaku.

Saya telah mempersempitnya menjadi <TextInput> yang dirender di dalam FlatList. Saat saya mengganti ini dengan <Text> , masalah hilang.

Mengatur ulang cache tampaknya membantu sebentar, tetapi aplikasi saya akan mogok lagi setelah beberapa klik tombol.

Pengujian @diegoboston dengan komponen pengujian saya, Anda dapat mereproduksi ini tanpa FlatList. Anda dapat menemukan komponen uji dan solusi / solusi di komentar saya di sini .

Saya menggunakan expo SDK 37 yang menggunakan react native 0.61 secara internal.
Aneh bahwa saya tidak memiliki masalah apa pun, tetapi tiba-tiba ketika saya memulai ulang pembuat, masalah ini muncul. Apakah belum diperbaiki?

RN 0.62.2 + Android sama di sini.
Kesalahan ini dipanggil dalam mode produksi.

Menghapus cache aplikasi dari pengaturan menyelesaikan masalah saya, tetapi tampaknya itu bukan solusi yang dapat diterima untuk ini.

Saya mengerjakan masalah ini dan ini adalah temuan saya ( posting sebelumnya

1) Kami tahu bahwa menambahkan android:editTextBackground dengan color/transparent ke Tema memperbaiki masalah

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

2) Mengejar metode ReactEditTextShadowNode createDummyEditText ke kode di bawah ini juga memperbaiki masalah (menurut saya yang menonaktifkan semua gaya untuk EditText)

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

Pemahaman saya sekarang tentang masalah ini adalah bahwa di Android Anda dapat menyetel gaya dengan dua cara

1) Menulis XML seperti elemen dan gaya html dan menerapkannya
2) Panggil konstruktor EditText atau View dan berikan konteks dan atribut / gaya lain dengannya.

ReactEditText menggunakan createDummyEditText untuk membuat instance EditText dan kemudian mengubah beberapa gaya (padding, layout ..etc), tapi ini berhubungan dengan layout (padding, margin) dan bukan warna latar belakang dll .. Sebenarnya saya mencoba mengubah baris kode itu menjadi setBackgroundTint menjadi red atau transparent dan tidak berhasil ...

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

warna latar belakang diubah dengan metode berikut

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

Pada hari Senin saya akan mencoba lagi untuk mengubah metode setBackgroundColor dan mengatur warna latar belakang transparan saat runtime ... Itu akan menjadi petunjuk pertama saya untuk menyelesaikan masalah ini

Tumpukan gagal pada 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 adalah metode terakhir yang dipanggil sebelum kegagalan, sisa tumpukan berasal dari pustaka OpenSource sdk Android dan itu bukan penyebab sebenarnya dari masalah tersebut

Menetapkan android:editTextBackground mungkin hanya menunggangi beberapa nilai item dari Tema Default yang menyebabkan masalah. Masalah terhubung ke konstruktor yang mengirimkan getThemedContext yang juga menyertakan tema

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

Untuk alasan ini saya percaya bahwa solusinya harus dicari dalam cara React menangani konteks ...

Teman-teman yang memulai ulang pengemas dan membersihkan cache berhasil untuk saya!

Tapi ini adalah solusi sementara bagaimana cara memperbaiki permanen ini?

Saya mencoba mengatur secara terprogram di java warna latar belakang menjadi transparan, tetapi masih memicu kesalahan waktu proses, yang membuat saya percaya kode di bawah ini

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

hanyalah logika over-riding dari

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

yang jelas merupakan penyebab masalah di stack

Metode itu bertanggung jawab untuk menyiapkan gaya EditText,

Masalahnya adalah bahwa tumpukan masalah asli tampaknya memiliki log yang berbeda dan tampaknya tidak terkait dengan kasus uji yang dilampirkan. Tumpukan di bawah ini berasal dari ReactEditText.onTouchEvent yang berarti pengguna menyentuh TextInput dan kesalahan dipicu.

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)

Jenis kesalahan lainnya https://github.com/facebook/react-native/issues/17530#issuecomment -376917781

Fatal Exception: java.lang.NullPointerException: Mencoba memanggil metode virtual 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' pada referensi objek null di android .graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875) di android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158) di android.graphics.drawable.DrawableContainer.getOpainer.java : 433) di android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258) di android.view.View.computeOpaqueFlags (View.java:16791) di android.view.View.setBackgroundDrawable (View.java:21710) di android.view.View.setBackground (View.java:21603) di android.view.View.(View.java:5547) di android.widget.TextView.(TextView.java:1135) di android.widget.EditText.(EditText.java:107) di android.widget.EditText.(EditText.java:103) di android.widget.EditText.(EditText.java:99) di android.widget.EditText.(EditText.java:95) di com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:92) di com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:94) di com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInput:65) com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:46) di com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:218) di com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperationQueue. jalankan (UIViewOperationQueue.java:150) di com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:923) di com.facebook.react.uewratch.uIViavaFacebook.java:923) di com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:31) di com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreog rapher.java:136) di com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame (ChoreographerCompat.java:107) di android.view.Choreographer $ CallbackRecord.run (Choreographer.java:909) di android. view.Choreographer.doCallbacks (Choreographer.java:723) di android.view.Choreographer.doFrame (Choreographer.java:655) di android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:897) di android.os.Handler .handleCallback (Handler.java:789) di android.os.Handler.dispatchMessage (Handler.java:98) di android.os.Looper.loop (Looper.java:164) di android.app.ActivityThread.main (ActivityThread. java: 6938) di java.lang.reflect.Method.invoke (Method.java) di com.android.internal.os.Zygote $ MethodAndArgsCaller.run (Zygote.java:327) di com.android.internal.os.ZygoteInit .main (ZygoteInit.java:1374)

di sisi lain saya bertanya pada diri sendiri apakah https://github.com/facebook/react-native/issues/17530#issuecomment -504044357 adalah contoh yang dapat diterima, karena tidak menyebabkan kesalahan secara manual dengan mengklik TextInput tetapi dengan melakukannya secara terprogram ..

Saya yakin seseorang dalam diskusi ini akan melakukan penelitian yang tepat dan menyelesaikan masalah ini. Terima kasih banyak dan semoga berhasil! : smiley:

Teman-teman, coba jalankan "npm install" lagi. Itu berhasil untuk saya.

Saya sudah mencoba menambahkan <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> dan ini menghentikan aplikasi agar tidak mogok namun kotak teks terus berkedip antara besar dan kecil dan tidak dapat digunakan, apakah ada orang lain yang memilikinya?

Dalam kasus saya, saya menggunakan komponen bergaya, saya menetapkan nama alat peraga adalah "benar", saya pikir itu istimewa, saya mengubah menjadi "benar" memecahkan masalah saya.

Ambil rilis build dan uji pada apk itu Anda tidak pernah melihat kesalahan ini

Komentar asli melaporkan masalah yang diperoleh melalui laporan bug analitik, dan bukan kesalahan dalam pengembangan, saya pikir kami harus tetap fokus.

Anda dapat mencoba keduanya dan salah satu poin, mana saja yang berfungsi untuk aplikasi Anda:

1. Hapus data cache aplikasi Anda dan biarkan memuat ulang
2. Mulai ulang server menggunakan npm start --reset-cache

https://github.com/facebook/react-native/pull/24183 Saya mencoba men-debug ini sekali lagi.

https://github.com/facebook/react-native/blob/9f699ae1855252397a516333a35a5e6aff74b89b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L537

Tampaknya ada masalah terkait buka https://issuetracker.google.com/issues/37068452 di proyek Android

1. Buat implementasi Drawable kustom yang tidak mengganti getConstantState ().
2. Buat instance LayerDrawable, dengan instance drawable kustom sebagai anak.
3. Panggil mutate () di LayerDrawable.

    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();

Dalam kasus kami, kesalahan waktu proses dipicu pada baris ini dari ReactEditText (diwarisi dari 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} /> akan mengirimkan informasi dari runtime JavaScript ke Android sebagai JSON melalui ReactNativeBridge, Android Java API akan menggunakan informasi tersebut untuk membuat instance View dan memekarkan (menampilkan) di layar.

Ini akan mengirimkan objek Context ke konstruktor View yang akan mengembangkan tata letak deault untuk <TextInput /> , lalu kapan pun kita mengubah properti seperti underlineColorAndroid , kita akan memanggil metode API Android tertentu untuk mis. setUnderlineColorAndroid("red") dan Android API akan menangani pembaruan warna garis bawah <TextInput /> .

Jika 37068452 menyebabkan Runtime, maka kita harus menjadi mutating() a BackgroundDrawable mungkin dengan mengubah underlineColor , tetapi kesalahan dipicu dalam konstruktor View ketika kita melewati Context .

Saya akan mencoba men-debug tumpukan Android, tetapi pertama-tama saya akan mencoba mengubah contoh ini menjadi Contoh yang Dapat Direproduksi Minimum dan menghapus semua properti yang tidak penting untuk mereproduksi bug.

Saya bisa membuat Contoh Minimum yang Dapat Direproduksi.
Masalah ini disebabkan oleh prop kunci TextInput.

Merender ulang sejumlah besar komponen TextInput dengan prop kunci akan menyebabkan error runtime.
Jumlah TextInput s tampaknya penting untuk memicu crash.

   // 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++) { ..

Crash tidak muncul kembali jika Anda menghapus TextInput key prop. Saya akan menyelidiki dan mencoba memperbaikinya. Jalankan contoh ini untuk mereproduksinya.

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;

Masalah yang sama dapat direproduksi dengan FlatList, jika data prop Anda menyertakan key , index atau id seperti ini [{ key: "1"}, {key: "2"}, .. {key: "5000"}] , otomatis key akan digunakan untuk Daftar Anda dan menyebabkan runtime. Menghapus kunci tersebut dari array data memperbaiki kesalahan dan menghapus cache otomatis.

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;

Masalahnya tampaknya disebabkan oleh baris kode ini. Saya mengomentari baris tersebut dan menggantinya dengan const key = 500; dan kesalahan tidak dapat muncul kembali ..

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

Contohnya adalah dengan keyExtractor(item, ii) dengan item = {"key":"450"} , ii = 50 dan nilai kembali key = 450 akan menyebabkan crash, tapi saya yakin ini bukan penyebab sebenarnya, tapi hanya indikasi bahwa kunci yang menyebabkan masalah. Saya akan terus menyelidiki ini. Aku sedang mencari pekerjaan. Terima kasih banyak. Semoga akhir pekan Anda menyenangkan.

| DENGAN RUNTIME |
|: -------------------------: |
| |

| TANPA RUNTIME |
|: -------------------------: |
| |

@ fabriziobertoglio1987 Saya memiliki kesimpulan serupa https://github.com/facebook/react-native/issues/17530#issuecomment -573934341, yaitu terkait dengan remounting / instantiating teks editan. Pada saat itu saya tidak mengerti mengapa input teks akan dibuat ulang / dipulihkan ketika mereka sepertinya tidak punya alasan untuk itu. Sekarang sepertinya kunci mungkin menjadi penyebabnya.

Kesalahan muncul dari sini

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

di mana array mDrawableFutures bukan null tapi beberapa elemen anaknya bisa jadi null.

mDrawableFutures hanya dapat digandakan dari orang lain

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

yang berarti tidak null ketika sedang di-clone tapi entah bagaimana beberapa elemen turunannya hancur setelahnya.
Berikut ini adalah tebakan saya: Alat peraga kunci akan memicu proses diffing, yang akan membangun node bayangan untuk input teks. Dan selama proses, status drawable akan dikloning. Namun, mungkin ada kondisi pacu / operasi non-thread-safe yang menghancurkan beberapa status drawable saat masih digunakan. @ fabrizioboglio1987

terima kasih banyak @sunnylqm Saya percaya pada kekuatan kolaborasi dan saya mencoba untuk mendapatkan permintaan tarik ini untuk menemukan beberapa pekerjaan.

Saya yakin masalah ini terkait dengan beberapa parameter kotor yang diteruskan saat menggunakan key dan 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

Anda benar, sebenarnya masalah ini hanya dialami saat menggunakan komponen TextInput . Misalnya mengganti TextInput dengan Text di renderItem akan memperbaiki masalah ini

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

Perbedaan antara menggunakan Text dan TextInput adalah bahwa const element akan menjadi ForwardRef dengan TextInput . Dalam kasus di bawah TextInput membuat runtime ketika mencapai kunci tertentu. Saya juga menghapus underlineColorAndroid="transparent" dan itu bukan penyebab kesalahan, tetapi saya meninggalkannya di log di bawah.

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 mengembalikan 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

Saya yakin metode di Java API dipanggil dari TextInput javascript API, tetapi dengan parameter yang hilang / kotor. Ini mungkin menyebabkan NPE Runtime Error, tetapi saya perlu menyelidiki setiap aspek dari JS TextInput API untuk memahami alasannya.

Saya pikir key prop menyebabkan masalah karena mekanisme React didasarkan pada perbandingan key prop, jika tidak ada mekanisme kunci prop, maka tidak cache dan selanjutnya tidak ada kesalahan .

Besok saya akan mencoba untuk menetapkan breakpoint di kode yang Anda referensikan dalam pesan di atas

Terima kasih banyak atas bantuannya. Semoga kami dapat menulis Permintaan Tarik bersama dan memperbaiki masalah ini. Saya berharap Anda selamat malam. Fabrizio

@tokopedia

TERLALU LAMA JANGAN DIBACA

Saya menulis permintaan tarik untuk memperbaiki masalah ini. Sangat mudah untuk diperbaiki.

Masalah ini disebabkan oleh BackgroundDrawable default yang digunakan dalam inisialisasi EditText

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

Drawable adalah salah satu dari tema yang kita gunakan Theme.AppCompat.Light.NoActionBar . Mengubah Drawable dapat dilakukan dengan mengubah file template xml yang digunakan untuk menginisialisasi proyek android react-native dengan skrip init react-native.

Saya akan menggunakan salah satu yang disediakan secara default dari android atau saya akan membuat drawable khusus dan menyertakannya dalam setiap inisialisasi proyek.

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

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

atau

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>

VERSI PANJANG

Saya mengutip sunnylqm https://github.com/facebook/react-native/issues/17530#issuecomment -660506001

Berikut ini adalah tebakan saya: Alat peraga kunci akan memicu proses diffing, yang akan membangun node bayangan untuk input teks. Dan selama proses, status drawable akan dikloning. Namun, mungkin ada kondisi pacu / operasi non-thread-safe yang menghancurkan beberapa status drawable saat masih digunakan.

Baris ini android:editTextBackground memperbaiki kesalahan, tapi APA yang dilakukan baris ini di ReactNative?

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

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

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

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

2) Kami mengubah AppTheme res/values/styles.xml

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

3) EditText konstruktor akan memanggil super(context) . Objek context termasuk layout dan theme ( AppTheme ).

Konstruktor View akan mendapatkan informasi gaya / tema / tata letak dari objek context dan membuat turunan EditText dengan gaya tersebut (xml seperti html), memekarkannya dan tampilkan di layar.

Android menggunakan xml seperti html untuk merender tampilan statis, sedangkan Java digunakan untuk merender konten dinamis (seperti JavaScript di Web).

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

4) ReactNative dibangun di atas Context API, tetapi akan menggunakan pola yang sama dari 1-3.
Inisialisasi tampilan dengan objek context , lalu gunakan JavaScript untuk membuat perubahan dinamis tanpa mengubah instance context secara langsung, tetapi menggunakan jembatan react-native melalui Android API.

| SEBELUM | SETELAH | SETELAH dengan alat peraga gaya TextInput |
|: -------------------------: |: -------------------- -----: |: -------------------------: |
| | | |

Saya menyiapkan Permintaan Tarik untuk mengubah Drawable default yang digunakan untuk EditText saat inisialisasi.
Drawable dari Theme <strong i="27">@android</strong>:drawable/edit_text terlalu tinggi untuk desain kita. Parent View menyesuaikan dengan tinggi drawable default jika tingginya lebih tinggi dari induknya. Saya yakin ReactNative menggunakan drawable default dengan tinggi rendah dan kemudian mengadaptasinya dengan match_parent ke Tampilan induk.

1) OPSI 1 - Temukan drawable dari tema lain

2) OPSI 2
Buat drawable baru di template react-native berdasarkan yang tersedia di proyek android dengan tinggi rendah ke semua tampilan match_parent View.

Saya menambahkan ke proyek android saya drawable berikut dengan tinggi beberapa piksel

Drawable latar belakang menyesuaikan dengan tinggi View induknya 10

Drawable latar belakang menyesuaikan dengan tinggi View induknya 100

tampaknya berfungsi dengan drawable latar belakang kecil, maka kita hanya perlu skrip react-native init untuk menginisialisasi proyek menggunakan drawable latar belakang ini secara default. Saya akan menambahkan perubahan explaiend di atas ke file di bawah ini dalam permintaan tarik.

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

Terima kasih banyak. Fabrizio

Menghadapi masalah yang sama dengan RN 0.61.0 + Android API level 28.
Saya telah mempersempitnya menjadi beberapa kombinasi dari Flatlist, TextInput dan render Komponen bersarang

@ fabriziobertoglio1987 saya telah mencoba cara ini tetapi mungkin saya melewatkan sth bahwa saya tidak berhasil. Saya tahu sedikit tentang android dan saya senang Anda bisa memperbaikinya. Sementara saya masih tertarik dengan masalah alat peraga utama.

@ fabriziobertoglio1987 Apakah ada kode js bereaksi asli yang dapat saya tambahkan untuk memperbaiki masalah ini dengan cepat? Biarkan aku tahu.

@ asmi24886 Anda dapat menemukan komponen pengujian untuk mereproduksi masalah ini dengan andal dan solusi kode / konfigurasi asli dalam komentar saya di sini
Saya rasa tidak ada solusi yang hanya menggunakan kode JS.

Ini adalah kelanjutan dari pesan saya sebelumnya https://github.com/facebook/react-native/issues/17530#issuecomment -660908150, upaya saya untuk mencari pekerjaan freelance dan menulis pull request untuk menutup masalah ini.

Saya membuat drawable khusus berdasarkan 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>

Runtime disebabkan dari entri berikut, jika saya menghapus baris ini salinan persis dari Drawable saat ini dari react-native berfungsi dan tidak memicu Runtime Error. Saya menyertakan Contoh Minimal yang Dapat Direproduksi di https://github.com/facebook/react-native/issues/17530#issuecomment -660017858 saya

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

Saya sedang menulis Permintaan Tarik, setelah permintaan tarik digabungkan, Anda akan dapat meningkatkan versi dengan pembantu peningkatan .

Permintaan Tarik akan menyertakan reproduksi skenario ini dalam aplikasi RNTester, perubahan pada template dan penambahan drawable khusus di atas untuk menghindari masalah ini.

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

Ini adalah video yang menampilkan error runtime ketika Drawable memiliki baris <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

Ini adalah video yang menampilkan perbaikan (tidak ada kesalahan runtime) ketika Drawable tidak memiliki baris <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

Seperti yang ditampilkan pada tangkapan layar di bawah ini, saya hanya menghapus baris berikut dari file xml drawable
xml <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
Saya tidak mengubah gayanya. Drawable sama dengan yang digunakan dari AppCompat dan gayanya akan sama, tetapi tidak akan memicu error runtime

Saya akan mencoba menerbitkan permintaan tarik besok .

Terima kasih banyak sunnylqm untuk berkolaborasi dengan saya untuk menulis https://github.com/facebook/react-native/pull/29452 yang memecahkan masalah ini.

Tampaknya ada bug di Drawable.mutate () di beberapa perangkat / versi os android bahkan setelah Anda memeriksa status konstan. Kesalahan ini sulit untuk direproduksi dan diperbaiki, jadi coba tangkap pengecualian untuk mencegah kerusakan.

Masalahnya disebabkan oleh baris ini di 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"/>

Baris di atas membuat StateListDrawable yang akan mengubah TextInput Background Image (Background Drawable ) tergantung pada status TextInput .

state_pressed="false" dan state_focused="false" akan memicu perubahan TextInput BackgroundDrawable. Gambar tersebut bukan penyebab masalah, tetapi saya menyertakannya untuk tujuan dokumentasi.

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

Di dalam DrawableContainer.getChild () variabel ConstantState cs adalah null . Memanggil null.newDrawable(mSourceRes) memicu Pengecualian Pointer Null. Panggilan ini adalah hasil dari perubahan status TextInput, dalam pelacakan tumpukan ini setelah ditekan.

mDrawableFutures tidak termasuk daftar entri yang benar https://github.com/facebook/react-native/pull/29452#issuecomment -662616018.

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

Info lebih lanjut di komentar sebelumnya 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# penerbitan -645851033 https://github.com/facebook/react-native/issues/17530#issuecomment -632795323

Terima kasih banyak
semoga harimu menyenangkan
Fabrizio

@ fabriziobertoglio1987 Apakah komentar di atas merupakan solusi atau perbaikan yang benar-benar dapat diterapkan yang perlu ditambahkan untuk bereaksi asli, kami saat ini menggunakan RN 0.59.3 dan mendapatkan kesalahan ini hanya dalam penggunaan produksi. Kami tidak bisa meniru dalam pembangunan.

@Coffeegerm Komentar di atas https://gub.com/facebook/react-native/issues/17530#issuecomment -662000718 adalah penjelasan singkat tentang bagaimana permintaan tarik saya https://gub.com/acebook/act-native/pull / 29452 memperbaiki masalah ini. Setelah permintaan tarik digabungkan dalam react-native

1) Aplikasi baru tidak akan mengalami kesalahan ini
2) Aplikasi yang Ada akan ditingkatkan dan tidak akan mengalami kesalahan. Baca Selengkapnya tentang mengupgrade saat mengupgrade # 3-upgrade-your-project-files untuk mempelajari lebih lanjut tentang cara menerapkan perubahan dalam folder /android saat Anda mengupgrade aplikasi.

Jika Anda tidak ingin meningkatkan, Anda dapat memeriksa PR saya https://github.com/facebook/react-native/pull/29452 dan menambahkan perubahan tersebut ke folder android proyek Anda. Anda tidak perlu mengubah react-native kode sumber, karena perubahan konfigurasi dari PR ini tidak ada di basis kode /ReactAndroid Java, tetapi di template Android digunakan untuk menginisialisasi proyek.

Saat ini saya sedang mengerjakan masalah lain, tetapi saya akan kembali, membalas masukan apa pun, dan melakukan perbaikan yang diperlukan pada Permintaan Tarik saya.

Silakan kembali kepada saya dengan saran untuk perbaikan dan umpan balik.

Semoga akhir pekan Anda menyenangkan
Terima kasih banyak atas bantuannya
Fabrizio

Baru saja melihat komit yang terdengar terkait https://github.com/facebook/react-native/commit/1e4d8d902daca8e524ba67fc3c1f4b77698c4d08

kami menghasilkan terlalu banyak operasi Buat + Hapus yang berlebihan dan dapat menyebabkan masalah konsistensi, crash, atau bug pada platform yang tidak menanganinya dengan baik -
terutama karena urutan Buat + Hapus tidak dijamin (tampilan yang direparasi dapat dibuat "pertama" dan kemudian perbedaannya nanti dapat mengeluarkan "hapus" untuk tampilan yang sama).

@ fabrizioboglio1987

Adakah gagasan tentang bagaimana seseorang dapat memperbaiki masalah ini saat menggunakan Expo, oleh karena itu tanpa akses ke folder android proyek? 😅

@divonelnc Ada solusi: Gunakan kunci baru setiap kali input teks dirender, misalnya,

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

Dan tentu saja itu dapat menyebabkan beberapa masalah lain dan penurunan kinerja.

@sunnylqm Sayangnya itu tidak membantu 😞. Saya masih mengalami crash secara acak di layar dengan lusinan input teks.

Saya dapat mengonfirmasi masalah ini dalam Produksi! RN: 0.62.2 😕

Masalah yang sama terjadi di RN 0.63.2 :(

Komitmen ini dapat memperbaiki masalah ini:
https://github.com/facebook/react-native/commit/a5b5d1a805a9c54d325763b432be1cf2c8811dc9

Masalah yang sama dengan Expo dan RN sdk https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz

Wow ini bikin frustasi. @WilliamAlexander @Hopding solusi bekerja. Saya tahu karena saya bisa mengulanginya setiap saat sebelumnya.
// 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>

Berikut solusi yang cukup bagus. Buat pembungkus untuk komponen input teks apa pun yang Anda gunakan, dan buat kuncinya dengan useMemo. Dengan cara ini satu input teks akan selalu memiliki kunci yang sama melalui render ulang, dan Anda juga tidak perlu menulis kunci untuk semua input teks Anda.

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

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

Jika Anda menggunakan expo
Saya mendapat kesalahan ini setelah meningkatkan dari expo SDK 38 menjadi 39.
Saya harus membersihkan cache expo saya (expo -rc) + cache aplikasi seluler expo (saya mencopot dan menginstal ulang untuk memastikan) dan kesalahan telah hilang.

@dpnick bug sangat sulit untuk direproduksi. Saya sarankan menggunakan komponen pengujian yang saya posting di sini untuk memastikannya benar-benar hilang.

Mendapatkan kesalahan ini dalam produksi dan saya tidak dapat mereproduksi masalah ini, versi RN saya adalah 0.62.2, berikut adalah log saya dari 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 bug sangat sulit untuk direproduksi. Sudahkah Anda mencoba komponen pengujian yang saya posting di sini ?

Saya menulis permintaan tarik yang memperbaiki masalah ini https://github.com/facebook/react-native/issues/17530#issuecomment -663577143

Silakan menuju ke pr https://github.com/facebook/react-native/pull/29452 ikuti instruksi https://github.com/facebook/react-native/wiki/Building-from-source#publish - your-own-version-of-react-native dan beri tahu saya jika Anda memerlukan bantuan. Saya akan mencoba memeriksa akhir pekan ini jika pr terpisah perlu ditulis untuk Expo, tetapi saya yakin mereka hanya akan mendapatkan perbaikan dengan memutakhirkan reactnative setelah pr ini digabungkan dan dirilis. Terima kasih banyak. Saya berharap Anda selamat malam

info lebih lanjut di posting saya sebelumnya https://github.com/facebook/react-native/issues/17530#issuecomment -662000718

Masalah yang sama di versi "react-native": "0.63.3"

cukup bersihkan cache Expo Anda di aplikasi seluler (jika Anda menggunakan aplikasi seluler) atau cache aplikasi Expo di platform apa pun yang Anda gunakan.

@ tzeneng96 oke, membersihkan cache bisa dilakukan dengan aplikasi, tetapi ini bukan solusi yang dapat diterima, karena masalah terulang kembali!

@AbdelkhalekESI bug sangat sulit untuk direproduksi. Sudahkah Anda mencoba komponen pengujian yang saya posting di sini ?

Saya bisa mereproduksi bug ini menggunakan komponen ini. Saya juga telah menerima banyak log tentang kerusakan ini dalam produksi. Proyek saat ini telah bereaksi pada versi 0.63.3.

Saya tidak tahu apakah saya salah, tetapi dalam topik ini yang dikutip oleh @ glenn-axsy, dari apa yang saya pahami, mereka berhasil menyelesaikannya dengan menambahkan andoid \ app \ src \ main \ res \ values ​​\ styles.xml barang itu:
"nama item =" android: editTextBackground "> @ android: color / transparent / item"

Saya masih menguji solusinya.

@thiagocristianno pemahaman Anda benar, meskipun ini bukan solusi yang sempurna dan saya percaya itu tidak membantu pengembang Expo karena mereka tidak dapat mengontrol pengaturan itu.

Wow ini bikin frustasi. @WilliamAlexander @Hopding solusi bekerja. Saya tahu karena saya bisa mengulanginya setiap saat sebelumnya.
// 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 , di mana Anda melihat solusinya?

Wow ini bikin frustasi. @WilliamAlexander @Hopding solusi bekerja. Saya tahu karena saya bisa mengulanginya setiap saat sebelumnya.
// 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 , di mana Anda melihat solusinya?

@bobowinca Ini adalah utas yang sangat panjang dan solusi itu 100% berhasil untuk saya. RN 63.3 tidak ada Expo

@ jordangrant , Doh! Selalu lihat sebelum bertanya. Saya telah gagal Terima kasih tuan.

Sepertinya Anda juga dapat mereproduksi masalah tersebut secara konsisten. Saya bertanya-tanya bagaimana Anda melakukan itu. Saya hanya melihat jejak tumpukan sejauh ini. Saya mencari cara untuk memverifikasi perbaikan.

@bobowinca komponen pengujian yang saya posting di sini akan membantu Anda mereproduksinya secara konsisten.

@bobowinca komponen pengujian yang saya posting di sini akan membantu Anda mereproduksinya secara konsisten.

bekerja seperti pesona! Terima kasih Glenn!

Menambahkan <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> ke styles.xml berhasil!
Metode dengan menambahkan ke TextInput key={Math.random().string()} berfungsi tetapi render ulang menyebabkan keyboard bersembunyi setiap saat setelah detik - itu tidak dapat diterima.