मूल प्रतिक्रिया में टेक्स्ट इनपुट को सही तरीके से कैसे संरेखित करें?

Question

पाठ इनपुट केंद्र संरेखित है, इस पाठ इनपुट को कैसे ठीक करें ताकि यह शीर्ष बाएं कोने से इनपुट ले

यहाँ पाठ इनपुट के लिए मेरा सीएसएस है

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

Comments

उम्म ... इसे किसके साथ संरेखित करें? आपका प्रश्न यह निर्दिष्ट नहीं करता है कि आप क्या करने की कोशिश कर रहे हैं।

— कॉलिन रामसे

मुझे अपनी सीएसएस में क्या जोड़ना चाहिए ताकि मेरा पाठ शीर्ष बाएं कोने से शुरू हो?

— विक्रमादित्य

Answer 1

मेरे पास एक ही मुद्दा था, लेकिन उपरोक्त नोटों ने इसे हल नहीं किया। एक एंड्रॉइड-ओनली स्टाइल प्रॉपर्टी है textAlignVerticalजो मल्टीलाइन इनपुट पर इस समस्या को ठीक करती है।

अर्थात textAlignVertical: 'top'

Comments

क्या ios डिफ़ॉल्ट रूप से हल किया गया है या यह फिक्स केवल एंड्रॉइड के लिए काम करता है?

— dev_ter

@dev_ter यह केवल Android है। मुझे लगता है कि आईओएस डिफ़ॉल्ट रूप से शीर्ष-संरेखित है, हालांकि यह आरएन का उपयोग करने के बाद से कुछ समय हो गया है इसलिए वास्तव में इसकी पुष्टि नहीं हुई है। निश्चित नहीं है कि आप कैसे / कैसे मध्य-संरेखित करेंगे, लेकिन बेझिझक नोट बना सकते हैं या संपादित कर सकते हैं यदि आपको पता चले कि कैसे!

बहुत बढ़िया, multiline={true}Android में TextInput संरेखित समस्या को हल किया ।

— C.Lee

यदि textAlignVertical यह केवल Android के लिए है, तो इसका उत्तर कैसे स्वीकार किया जा सकता है?

— मैक्स

आईओएस में भी काम कर रहा है

— गहरी

Answer 2

TextInput में डिफ़ॉल्ट पैडिंग है, इसे सेटिंग में ओवरराइड करें:

paddingTop: 0,
paddingBottom: 0

गितुब अंक

Comments

यह मेरा मुद्दा था। इसके अलावा, textAlignVertical प्रलेखन के

— shoopi

Answer 3

मैंने हल खोज लिया है कि Android में, TextInput शैली textAlignVertical: 'top'काम करती है। लेकिन ios में, TextInput प्रोप multiline={true}काम करता है।

Answer 4

मेरे आईओएस ऐप में भी इसी तरह का प्रयोग हुआ था, जिसमें TextInputऊँचाई 100 थी और प्लेसहोल्डर बीच में दिखा रहा था। मैंने उपयोग किया multiline={true}और इसने पाठ को ऊपर से प्रकट किया। उम्मीद है की वो मदद करदे।

Comments

क्या यह नीचे की ओर दिखाई देने का एक तरीका है?

— जोहान सैंटाना

Answer 5

textAlignVertical : "top"वह दें जो आपकी समस्या का समाधान करेगा।

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

Answer 6

अद्यतन 2015-07-03: बहुस्तरीय पाठ इनपुट अब विलय कर दिए गए हैं:

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

बहु उदाहरण के रूप में दस्तावेज के साथ जहाज यूआई Explorer में प्रतिक्रिया मूल निवासी काम करना चाहिए।

आपके पास समस्या यह है कि बहु-पाठ TextInput अभी तक सही ढंग से काम नहीं कर रहा है, और डॉक्स भ्रामक हैं। कृपया इस गितुब मुद्दे को देखें:

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

"हमने उस कार्यक्षमता को स्रोत खोलने के लिए अभी तक पोर्ट नहीं किया है।"

उस मुद्दे में कुछ कोड है जो न्यूनतम मल्टीलाइन कार्यक्षमता देता है, इसलिए आप इसे उसी के साथ काम करने में सक्षम हो सकते हैं।

Answer 7

इसने मेरे लिए काम किया (RN 0.61.5):

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

Answer 8

उपरोक्त उत्तर या तो आईओएस या एंड्रॉइड के लिए देते हैं, जो काफी भ्रामक हो सकता है, इसलिए यह दोनों प्लैटफॉम्स के लिए इसे ठीक करता है।

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

एंड्रॉयड के लिए -

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

आईओएस के multiline={true} लिए, <TextInput/>घटक में जोड़ें

Answer 9

बस आप कोड के लिए देख रहे हैं:

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

Answer 10

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

Answer 11

मुझे प्रति तत्व निरीक्षक का पता चला, कि आईओएस के paddingTop: 5लिए एक multiline TextInputएस है। यह तब भी लागू किया गया था जब मैंने paddingVertical: 15अपने सभी इनपुट के लिए सेट किया था । परिणाम आईओएस पर बहुस्तरीय आदानों में एक केंद्रित पाठ नहीं था। इसके अतिरिक्त समाधान यह है paddingTop: 15कि यदि कोई TextInputहै multilineऔर प्लेटफॉर्म iOS है। अब दोनों प्लेटफार्मों, एंड्रॉइड और आईओएस पर सिंगल लाइन और मल्टीलाइन इनपुट के बीच कोई अंतर नहीं है।

Answer 12

मुझे लगता है कि यह iOS के लिए डिफ़ॉल्ट है, मेरे मामले में एंड्रॉइड के paddingVertical: 0,लिए टेक्स्ट स्टाइल में काम किया गया है।

Answer 13

दोनों प्लेटफ़ॉर्म पर पाठ को लंबवत केंद्र में लाने के लिए उपयोग करें:

Android उपयोग के लिए textAlignVertical: "center"

आईओएस उपयोग के लिए justifyContent: "center"