วิธีการจัดเรียงข้อความอย่างถูกต้องในการตอบสนองดั้งเดิม

การป้อนข้อความอยู่ในแนวกึ่งกลางวิธีแก้ไขการป้อนข้อความนี้เพื่อให้รับข้อมูลจากมุมบนซ้าย

นี่คือ css ของฉันสำหรับการป้อนข้อความ

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

ฉันมีปัญหาเดียวกัน แต่บันทึกข้างต้นไม่สามารถแก้ปัญหาได้ มีคุณสมบัติรูปแบบเฉพาะสำหรับ Android เท่านั้นtextAlignVerticalที่แก้ไขปัญหานี้ในอินพุตแบบหลายบรรทัด

กล่าวคือ textAlignVertical: 'top'

TextInput มีช่องว่างภายในเริ่มต้นแทนที่ด้วยการตั้งค่า:

paddingTop: 0,
paddingBottom: 0

ปัญหา Github

ฉันพบวิธีแก้ปัญหาที่ใน Android สไตล์ TextInput ใช้textAlignVertical: 'top'งานได้ แต่ใน iOS TextInput prop multiline={true}ทำงานได้

ฉันมีกรณีการใช้งานที่คล้ายกันในแอป iOS ของฉันซึ่งTextInputความสูงคือ 100 และตัวยึดแสดงอยู่ตรงกลาง ฉันใช้multiline={true}และมันทำให้ข้อความปรากฏจากด้านบน หวังว่าจะช่วยได้

ให้textAlignVertical : "top"สิ่งนั้นช่วยแก้ปัญหาของคุณ

<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

ตัวอย่างหลายบรรทัดที่มาพร้อมกับ React Native ใน UI Explorer ควรทำงานตามเอกสาร

ปัญหาที่คุณจะพบก็คือการป้อนข้อความหลายบรรทัดยังทำงานไม่ถูกต้องและเอกสารทำให้เข้าใจผิด โปรดดูปัญหา Github นี้:

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

"เรายังไม่ได้ย้ายฟังก์ชันดังกล่าวไปยังโอเพนซอร์ส"

มีบางรหัสในปัญหานั้นที่ให้ฟังก์ชันหลายบรรทัดน้อยที่สุดดังนั้นคุณอาจสามารถใช้งานได้

มันได้ผลสำหรับฉัน (RN 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 TextInputs สิ่งนี้ยังคงถูกนำไปใช้แม้ว่าฉันจะตั้งค่าpaddingVertical: 15สำหรับอินพุตทั้งหมดของฉัน ผลลัพธ์ที่ได้คือข้อความที่ไม่อยู่กึ่งกลางในอินพุตหลายบรรทัดบน iOS วิธีแก้ปัญหาคือเพิ่มpaddingTop: 15if the TextInputis multilineและแพลตฟอร์มเป็น iOS เพิ่มเติม ขณะนี้ไม่มีความแตกต่างระหว่างอินพุตบรรทัดเดียวและหลายบรรทัดบนทั้งสองแพลตฟอร์ม Android และ iOS

ฉันคิดว่าเป็นค่าเริ่มต้นสำหรับ iOS สำหรับ Android ในกรณีของฉันการเพิ่มpaddingVertical: 0,รูปแบบข้อความใช้งานได้

คำตอบข้างต้นให้สำหรับ iOS หรือ Android ซึ่งอาจทำให้เข้าใจผิดได้มากดังนั้นสิ่งนี้จึงแก้ไขได้สำหรับ platfoms ทั้งสอง

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

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

สำหรับ iOS เพิ่ม multiline={true} ไปยัง<TextInput/>องค์ประกอบ

ในการจัดข้อความให้อยู่ในแนวตั้งตรงกลางบนทั้งสองแพลตฟอร์มให้ใช้:

สำหรับการใช้งาน Android textAlignVertical: "center"

สำหรับการใช้งาน iOS justifyContent: "center"