본문 바로가기
모바일 앱/React Native

[React Native] TextInput의 기본 패딩 없애기

by 테크케찰 2021. 6. 17.

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값을 없애주시려면 아래와 같이 하시면 됩니다.

photoCaption:{
        backgroundColor:'#F9F9F9',
        color:'#3C3C3E',
        fontSize:13,
        paddingLeft:8,

        marginTop:8,

        padding:0, // 이 속성을 추가해주시면 됩니다.
        margin:0, // 이 속성을 추가해주시면 됩니다.

        fontFamily:'NotoSans-DemiLight',
        lineHeight:23,

        height:30
    },

그러면 아래와 같이 글자가 잘리지 않고 잘 나오게 됩니다.