Bagaimana cara menyelaraskan input teks dengan benar di react native?

Input teks rata tengah, cara memperbaiki input teks ini sehingga mengambil input dari pojok kiri atas

Ini css saya untuk input teks

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
  flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}

Saya memiliki masalah yang sama, tetapi catatan di atas tidak menyelesaikannya. Ada properti gaya khusus androidtextAlignVertical yang memperbaiki masalah ini pada input multiline.

yaitu textAlignVertical: 'top'

TextInput memiliki padding default, ganti dengan menyetel:

paddingTop: 0,
paddingBottom: 0

Masalah Github

Saya telah menemukan solusi bahwa di Android, gaya TextInput textAlignVertical: 'top'berfungsi. tetapi di ios, prop TextInput multiline={true}berfungsi.

Saya memiliki kasus penggunaan serupa di aplikasi iOS saya, di mana TextInputtingginya 100 dan placeholder ditampilkan di tengah. Saya menggunakan multiline={true}dan itu membuat teks muncul dari atas. Semoga membantu.

Berikan textAlignVertical : "top"itu akan menyelesaikan masalah Anda.

<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />

Pembaruan 2015-07-03: input teks multiline sekarang telah digabungkan:

https://github.com/facebook/react-native/pull/991

The contoh multiline bahwa kapal dengan Bereaksi asli di UI Explorer harus bekerja seperti yang didokumentasikan.

Masalah yang akan Anda hadapi adalah bahwa TextInput multiline belum berfungsi dengan benar, dan dokumennya menyesatkan. Silakan lihat masalah Github ini:

https://github.com/facebook/react-native/issues/279

"Kami belum memindahkan fungsionalitas itu ke open source."

Ada beberapa kode dalam masalah itu yang memberikan fungsionalitas multiline minimal, jadi Anda mungkin bisa membuatnya bekerja dengannya.

Ini berhasil untuk saya (RN 0.61.5):

<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />

Hanya Memetikan Anda mencari kode:

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>

import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

// ...
intext: {
    height:screenHeight - 10,
    textAlignVertical: 'top',
    fontSize:17,
    padding:12,
    fontFamily:'courier',
    margin:10,     
},

Saya menemukan per inspektur elemen, bahwa untuk iOS ada paddingTop: 5untuk multiline TextInputs. Ini tetap diterapkan meskipun saya mengatur paddingVertical: 15semua masukan saya. Hasilnya adalah teks yang tidak terpusat pada input multiline di iOS. Solusinya adalah untuk tambahan menambahkan paddingTop: 15jika TextInputini multilinedan platform adalah iOS. Sekarang secara visual tidak ada perbedaan antara input single line dan multiline di kedua platform, Android dan iOS.

Saya pikir ini default untuk iOS, untuk android dalam kasus saya menambahkan paddingVertical: 0,gaya teks berfungsi.

Jawaban Di Atas baik memberikan untuk iOS atau android, yang bisa sangat menyesatkan sehingga ini memperbaikinya untuk kedua platfom.

<TextInput
style={{
flex: 1,
width: "100%",
height: 150,
color: "#FFF",
textAlignVertical: "top", // android fix for centering it at the top-left corner 
}}
multiline={true} // ios fix for centering it at the top-left corner 
numberOfLines={10}
/>

Untuk Android -

style={{
//...
flex:1,
textAlignVertical: "top", // android fix for centering it at the top-left corner 
//...
}}

Untuk iOS, tambahkan multiline={true} ke <TextInput/>komponen

Untuk membuat teks rata di tengah kedua platform, gunakan:

Untuk penggunaan android textAlignVertical: "center"

Untuk penggunaan ios justifyContent: "center"