Почему высота TextInput изменяется при первом рендере? - PullRequest
Новая
       6

Почему высота TextInput изменяется при первом рендере?

0 голосов
/ 10 января 2020

Я пытаюсь создать собственный ввод текста в ReactNative.

Начальная высота должна быть 48, но после рендеринга она устанавливает высоту 53.71428680419922, и я не понимаю, почему .

Код здесь 

import React, { Component } from 'react'
import styled from 'styled-components/native'

const Input = styled.TextInput`
  font-family: Roboto;
  font-size: 16;
  padding-bottom: 16;
  padding-top: 16;
  height: ${props => props.height};
  ${props => props.underline
    ? {
      paddingLeft: 0,
      paddingRight: 0,
      borderBottomWidth: 1,
    } : {
      marginTop: 18,
      paddingLeft: 22,
      paddingRight: 22,
      borderWidth: 1,
      borderStyle: 'solid',
    }}
`

export default class TextField extends Component {
  state = {
    height: 48,
  }

  handleContentSize = ({ nativeEvent: { contentSize: { height } } }) => {
    this.setState({ height })
  }

  render() {
    return (
        <Input
          height={this.state.height}
          underline={underline}
          multiline={!underline}
          onContentSizeChange={this.handleContentSize}
        />
    )
  }
}
...