본문 바로가기

TextInput3

[React Native] iOS TextInput autoScroll, autoFocus 되지 않는 이슈 (+TextInput이 키보드에 가려지는 이슈) ... 위 내용은 제가 작업하고 있는 모바일 텍스트 에디터의 모습을 간단히 나타낸 것입니다. ScrollView 안에 TextInput과 Image 태그를 혼합하여 사용 중입니다. 일부 모습을 보여드리면 아래와 같습니다. 작업하던 중, ios에서 textInput에 autoFocus와 autoScroll이 되지 않는 이슈가 있었습니다. 자동 스크롤이 되지 않아 multiline으로 작성하던 내용이 키보드에 가려 나타나지 않는 이슈도 있었습니다. 저는 이 이슈를 TextInput 속성에 scrollEnabled={false}를 추가하여 해결했습니다. 참고 https://github.com/facebook/react-native/issues/16826 KeyboardAvoidingView has no eff.. 2021. 7. 13.
[React Native] TextInput의 기본 패딩 없애기 React Native에서 TextInput을 사용해보시면 기본적으로 패딩값이 적용되어 있다는 것을 아실 겁니다. photoCaption:{ backgroundColor:'#F9F9F9', color:'#3C3C3E', fontSize:13, paddingLeft:8, marginTop:8, fontFamily:'NotoSans-DemiLight', lineHeight:23, height:30 }, 이것은 제가 작업하던 소스 코드의 일부인데요, 이 style을 TextInput에 적용하였더니 아래와 같은 결과가 나왔습니다. 보시면 TextInput에 height를 적용한 상황인데, 글자가 잘리시는 것을 볼 수 있습니다. TextInput에 디폴트로 패딩 값이 들어있어서 그런 건데, padding값을 없애.. 2021. 6. 17.
[React Native] TextInput returnKeyType이 적용이 되지 않는 경우 얼마 전 프로젝트를 진행할 때 textInput에서 returnKeyType을 적용해야하는 경우가 있어 적용을 했습니다. returnKeyType은 키보드 우측 하단에 있는 버튼을 어떤 타입으로 할 건지를 결정하는 prop입니다. 아래 링크와 사진을 참고하시면 이해에 도움이 될 것입니다. https://reactnative.dev/docs/textinput#returnkeytype TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-cap.. 2021. 5. 24.

티스토리툴바