Tepki yerelde metin girişi doğru şekilde nasıl hizalanır?

Metin girişi ortaya hizalanır, bu metin girişi sol üst köşeden giriş alacak şekilde nasıl düzeltilir

İşte metin girişi için css'im

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

Ben de aynı sorunu yaşadım, ancak yukarıdaki notlar sorunu çözmedi. Bir var android okunur tarzı bir tesistir textAlignVerticalsatırlı girdileri bu sorunu giderir söyledi.

yani textAlignVertical: 'top'

TextInput varsayılan dolgusuna sahiptir, bunu ayarlayarak geçersiz kılın:

paddingTop: 0,
paddingBottom: 0

Github Sorunu

Android'de TextInput stilinin textAlignVertical: 'top'işe yaradığı çözümü buldum . ancak ios'ta TextInput özelliği multiline={true}çalışır.

İOS uygulamamda benzer bir kullanım durumum vardı, burada TextInputyüksekliği 100'dü ve yer tutucunun ortada gösteriliyordu. Ben kullandım multiline={true}ve metnin yukarıdan görünmesini sağladı. Umarım yardımcı olur.

textAlignVertical : "top"Sorununuzu çözecek olanı verin .

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

Güncelleme 2015-07-03: çok satırlı metin girişleri artık birleştirildi:

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

UI Explorer'da React Native ile birlikte gelen çok satırlı örnekler belgelendiği gibi çalışmalıdır.

Karşılaşacağınız sorun, çok satırlı TextInput'un henüz düzgün çalışmaması ve belgelerin yanıltıcı olmasıdır. Lütfen bu Github sorununa bakın:

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

"Bu işlevselliği henüz açık kaynağa taşımadık."

Bu sayıda minimum çok satırlı işlevsellik sağlayan bazı kodlar vardır, bu nedenle bununla çalışmasını sağlayabilirsiniz.

Benim için çalıştı (RN 0.61.5):

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

Sadece kodu arıyorsun Incase:

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

Öğe denetçisi başına, iOS için bir paddingTop: 5for multiline TextInputs olduğunu öğrendim . Bu, paddingVertical: 15tüm girdilerim için ayarlamama rağmen yine de uygulandı . Sonuç, iOS'ta çok satırlı girişlerde ortalanmamış bir metin oldu. Çözelti, ilave bir ekleme olarak paddingTop: 15ise TextInputolan multilineve platform IOS olup. Artık hem Android hem de iOS platformlarında tek satırlı ve çok satırlı girdiler arasında görsel olarak hiçbir fark yok.

Sanırım iOS için varsayılan, benim durumumda android paddingVertical: 0,için metin stiline ekleme çalıştı.

Yukarıdaki Cevaplar, iOS veya android için verir, bu oldukça yanıltıcı olabilir, bu nedenle bu, her iki platform için de düzeltir.

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

Android için -

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

İOS multiline={true} için <TextInput/>bileşene ekleyin

Metni her iki platformda dikey olarak ortalamak için şunu kullanın:

Android kullanımı için textAlignVertical: "center"

İOS kullanımı için justifyContent: "center"