리액트 네이티브에서 텍스트 입력을 올바르게 정렬하는 방법

리액트 네이티브에서 텍스트 입력을 올바르게 정렬하는 방법

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

텍스트 입력용 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: 'top'

TextInput에는 기본 패딩이 있습니다.다음 설정으로 덮어씁니다.

paddingTop: 0,
paddingBottom: 0

Github 문제

Android에서 TextInput 스타일이라는 솔루션을 찾았습니다.textAlignVertical: 'top'동작합니다만, ios에서는, TextInput 프로포트가multiline={true}작동하다.

위의 답변은 iOS용 또는 Android용입니다.이것은 오해를 불러일으킬 수 있기 때문에, 양쪽의 platfom에 대응하고 있습니다.

<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/>요소

줘textAlignVertical : "top"당신의 문제를 해결해 줄 거에요.

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

제 iOS 앱에서도 비슷한 사용 사례가 있었습니다.TextInput의 키는 100이었고 자리 표시자는 가운데에 표시되어 있었다.나는 사용했다multiline={true}텍스트가 위에서부터 나타나도록 했습니다.

효과가 있었습니다(RN 0.61.5):

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

업데이트 2015-07-03: 여러 줄의 텍스트 입력이 병합되었습니다.

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

UI 탐색기에 React Native와 함께 제공되는 여러 줄의 예는 문서화된 대로 작동합니다.

문제는 여러 줄의 텍스트 입력이 아직 제대로 작동하지 않고 문서가 오해의 소지가 있다는 것입니다.다음 Github 문제를 참조하십시오.

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

"우리는 아직 이 기능을 오픈 소스로 이식하지 않았습니다."

이 문제에는 최소한의 멀티라인 기능을 제공하는 코드가 있기 때문에 이 코드와 함께 사용할 수 있을 것입니다.

코드를 찾고 있는 경우:

<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: 15만약TextInput이multiline플랫폼은 iOS입니다.이제 Android와 iOS 두 플랫폼 모두에서 단일 회선과 다중 회선 입력 사이에 시각적으로 차이가 없습니다.

iOS의 경우 기본이고, 제 경우 Android의 경우 기본 설정입니다.paddingVertical: 0,텍스트 스타일이 작동했습니다.

iOS의 솔루션은 생각만큼 간단하지 않은 것 같습니다.

Android에서는 다음 스타일을 추가할 수 있습니다.

paddingTop: 0,
paddingBottom: 0,

iOS에서는 다음이 필요합니다.

multiline={true}

하지만 만약 당신이 한 줄을 원한다면요?회피책은 다음과 같습니다.

<TextInput
   value={comment}
   onChangeText={setComment}
   {/*The lines below are the important ones*/}
   multiline={true}
   blurOnSubmit={true}
   autoCorrect={false}
   onSubmitEditing={handleOnSubmit}
/>

여기서 무슨 일이 일어나고 있는지 설명하겠습니다.

1. , ★★★★★★★★★★★★★★★★★★★★★★★★」multiline={true}이치노
2. [ ]버튼을 후 [ ]가 필요합니다.blurOnSubmit={true}키보드가 닫히기도 하고, 제 경우는 괜찮지만, 안타깝게도 그 방법을 찾을 수 없었습니다.
3. 하였습니다.autoCorrect={false}이 기능이 없으면 [Submit]버튼은 TextInput의 값을 자동으로 선택된 제안(있는 경우)으로 변경하기 때문입니다.
4. 때하려면 [Submit]가합니다.버튼을 눌렀을 때 액션을 수행하려면onSubmitEditing={handleOnSubmit}.

텍스트를 정렬하는 여행이라니...

텍스트를 두 플랫폼의 중앙에 수직으로 정렬하려면 다음을 사용합니다.

는 ★★★★★★★★★★★★★★★★★★★textAlignVertical: "center"

IOS를 합니다.justifyContent: "center"

언급URL : https://stackoverflow.com/questions/29560065/how-to-align-text-input-correctly-in-react-native