Làm thế nào để căn chỉnh đầu vào văn bản một cách chính xác trong phản ứng gốc?

Mục nhập Văn bản được căn giữa, cách sửa lỗi nhập văn bản này để nhập liệu từ góc trên cùng bên trái

Đây là css của tôi để nhập văn bản

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

Tôi đã gặp vấn đề tương tự, nhưng các ghi chú ở trên không giải quyết được nó. Có một thuộc tính kiểu chỉ dành cho androidtextAlignVertical khắc phục sự cố này trên đầu vào nhiều dòng.

I E textAlignVertical: 'top'

TextInput có phần đệm mặc định, ghi đè nó bằng cách cài đặt:

paddingTop: 0,
paddingBottom: 0

Sự cố trên Github

Tôi đã tìm thấy giải pháp mà trong Android, kiểu TextInput textAlignVertical: 'top'hoạt động. nhưng trong ios, TextInput prop multiline={true}hoạt động.

Tôi gặp trường hợp sử dụng tương tự trong ứng dụng iOS của mình, trong đó TextInputchiều cao của nó là 100 và trình giữ chỗ hiển thị ở giữa. Tôi đã sử dụng multiline={true}và nó làm cho văn bản xuất hiện từ trên xuống. Hy vọng rằng sẽ giúp.

Đưa textAlignVertical : "top"ra điều đó sẽ giải quyết vấn đề của bạn.

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

Cập nhật 2015-07-03: các đầu vào văn bản nhiều dòng hiện đã được hợp nhất:

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

Các ví dụ đa dòng đi kèm với React Native trong UI Explorer sẽ hoạt động như được ghi lại.

Vấn đề bạn sẽ gặp phải là TextInput nhiều dòng chưa hoạt động chính xác và các tài liệu bị sai lệch. Vui lòng xem vấn đề Github này:

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

"Chúng tôi chưa chuyển chức năng đó sang mã nguồn mở."

Có một số mã trong vấn đề đó cung cấp chức năng đa dòng tối thiểu, vì vậy bạn có thể làm cho nó hoạt động với điều đó.

Nó làm việc cho tôi (RN 0,61,5):

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

Chỉ trong trường hợp bạn đang tìm kiếm mã:

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

Tôi phát hiện ra cho mỗi người kiểm tra phần tử, rằng đối với iOS có một paddingTop: 5cho multiline TextInputs. Điều này vẫn được áp dụng mặc dù tôi đã đặt paddingVertical: 15cho tất cả các đầu vào của mình. Kết quả là văn bản không được căn giữa trong đầu vào nhiều dòng trên iOS. Giải pháp là bổ sung thêm một paddingTop: 15nếu TextInputcó multilinevà nền tảng là iOS. Giờ đây, không có sự khác biệt trực quan giữa đầu vào một dòng và nhiều dòng trên cả hai nền tảng, Android và iOS.

Để văn bản được căn chỉnh theo chiều dọc ở giữa trên cả hai nền tảng, hãy sử dụng:

Sử dụng cho android textAlignVertical: "center"

Để sử dụng ios justifyContent: "center"