React Native에서 텍스트 입력을 올바르게 정렬하는 방법은 무엇입니까?

텍스트 입력이 가운데 정렬되어 있습니다.이 텍스트 입력을 수정하여 왼쪽 상단 모서리에서 입력을 받도록하는 방법

다음은 텍스트 입력 용 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

여러 예제 설명 된대로와 선박은 UI Explorer에서 기본 반응하는 것이 작동합니다.

문제는 여러 줄 TextInput이 아직 올바르게 작동하지 않고 문서가 오해의 소지가 있다는 것입니다. 이 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,     
},

나는 아이폰 OS에 대한이 있다는 것을, 요소 관리자 당 발견 paddingTop: 5에 대한 multiline TextInput의. paddingVertical: 15모든 입력에 대해 설정했지만 여전히 적용되었습니다 . 그 결과 iOS의 여러 줄 입력에서 텍스트가 중앙에 정렬되지 않았습니다. 해결책은 paddingTop: 15if the TextInputis multilineand the platform is iOS를 추가하는 것이 었습니다 . 이제 Android와 iOS 플랫폼 모두에서 단일 라인 입력과 다중 라인 입력간에 시각적으로 차이가 없습니다.

두 플랫폼에서 텍스트를 세로로 가운데 정렬하려면 다음을 사용하십시오.

안드로이드 용 textAlignVertical: "center"

iOS 용 justifyContent: "center"