পাঠ্য ইনপুটটি কেন্দ্রের সাথে সংযুক্ত থাকে, কীভাবে এই পাঠ্য ইনপুটটি ঠিক করা যায় যাতে উপরের বাম কোণ থেকে ইনপুট লাগে
এখানে পাঠ্য ইনপুট জন্য আমার সিএসএস
/* 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
}
উত্তর:
আমার একই সমস্যা ছিল, তবে উপরের নোটগুলি এটি সমাধান করে নি। একটি অ্যান্ড্রয়েড-কেবল শৈলীর সম্পত্তি রয়েছে textAlignVerticalযা মাল্টিলাইন ইনপুটগুলিতে এই সমস্যাটিকে ঠিক করে।
অর্থাত্ textAlignVertical: 'top'
multiline={true}Android এর সাথে টেক্সটইনপুট প্রান্তিককরণ সমস্যার সমাধান করুন solved
textAlignVertical কেবল অ্যান্ড্রয়েডের জন্য হলে কীভাবে উত্তর গৃহীত হবে ?
টেক্সটইনপুটটিতে ডিফল্ট প্যাডিং রয়েছে, সেট করে এটি ওভাররাইড করুন:
paddingTop: 0,
paddingBottom: 0
আমার আইওএস অ্যাপ্লিকেশনটিতে আমার অনুরূপ ব্যবহারের ঘটনা ঘটেছে, যার TextInputউচ্চতা 100 এবং স্থানধারকটি মাঝখানে দেখছিলেন। আমি ব্যবহার করেছি multiline={true}এবং এটি উপরে থেকে পাঠ্যটি প্রদর্শিত হতে পারে। আশা করি এইটি কাজ করবে.
textAlignVertical : "top"এটি আপনার সমস্যার সমাধান করবে Give
<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />
আপডেট 2015-07-03: মাল্টলাইন পাঠ্য ইনপুটগুলি এখন মার্জ করা হয়েছে:
https://github.com/facebook/react-native/pull/991
একাধিক লাইন উদাহরণ হিসাবে নথিভুক্ত যে সঙ্গে জাহাজ UI 'তে Explorer এ প্রতিক্রিয়া দেশীয় কাজ করা উচিত।
আপনার সমস্যাটি হ'ল মাল্টলাইন টেক্সটইনপুটটি এখনও সঠিকভাবে কাজ করছে না এবং ডক্স বিভ্রান্ত করছে। দয়া করে এই গিথুব ইস্যুটি দেখুন:
https://github.com/facebook/react-native/issues/279
"আমরা এখনও ওপেন সোর্সটিতে সেই কার্যকারিতাটি পোর্ট করি নি।"
এই ইস্যুতে কিছু কোড রয়েছে যা ন্যূনতম মাল্টলাইন কার্যকারিতা দেয়, তাই আপনি এটির সাথে এটি কাজ করতে সক্ষম হতে পারেন।
এটি আমার পক্ষে কাজ করেছে (আরএন 0.61.5):
<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />
আপনি কোড সন্ধান করছেন কেবলমাত্র তেমন ক্ষেত্রে:
<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,
},
আমি উপাদান পরিদর্শক প্রতি খুঁজে পেয়েছি, iOS এর জন্য একটি paddingTop: 5জন্য আছে multiline TextInput। যদিও আমি paddingVertical: 15আমার সমস্ত ইনপুট সেট করেছিলাম এটি এখনও প্রয়োগ করা হয়েছিল । ফলাফলটি আইওএস-এ মাল্টলাইন ইনপুটগুলিতে একটি কেন্দ্রিক নয় পাঠ্য ছিল। সমাধানটি ছিল অতিরিক্তভাবে একটি যুক্ত করা এবং paddingTop: 15যদি প্ল্যাটফর্মটি আইওএস হয়। এখন উভয় প্ল্যাটফর্ম, অ্যান্ড্রয়েড এবং আইওএসে একক লাইন এবং মাল্টলাইন ইনপুটগুলির মধ্যে দৃশ্যত কোনও পার্থক্য নেই।TextInputmultiline
উপরের উত্তরগুলি হয় আইওএস বা অ্যান্ড্রয়েডের জন্য দেয় যা বেশ বিভ্রান্তিকর হতে পারে তাই এটি প্ল্যাটফামের উভয়ের জন্যই এটি ঠিক করে।
<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/>উপাদানটিতে যুক্ত করুন
উভয় প্ল্যাটফর্মে উল্লম্বভাবে কেন্দ্রে পাঠ্য প্রান্তিককরণের জন্য ব্যবহার করুন:
অ্যান্ড্রয়েড ব্যবহারের জন্য textAlignVertical: "center"
আইওএস ব্যবহারের জন্য justifyContent: "center"