iOS TextInput相对于字体大小的高度react-native

Question

我在使用React-Native的文本输入模块时遇到了问题

https://facebook.github.io/react-native/docs/textinput.html

在Android上，这很好也很简单，你创建TextInput，给它一个字体大小，它就相应地设置TextInput控件的高度。

另一方面，对于iOS，除非您在样式中为TextInput提供明确的高度，否则它将是0。

这通常没问题，但因为我在应用程序中使用可变字体大小。我需要文本输入高度匹配字体大小。

我尝试将文本输入高度设置为与字体大小相同的值。这没有正确运行，我不认为两者是相对的。

我有一些多行文本输入，我想根据单行的高度计算我想要的高度。

伪码

lineHeight = getHeightForFontSize(15);
multiLineHeight = lineHeight * 4; // 4 lines

综上所述。如何根据字体大小（事先知道）获取 TextInput 视图的高度。

Answer 1

您可以使用onContentSizeChange来获取多行文本输入的字体高度。我用它来更改文本输入的高度，因为文本太长了。但请确保您使用的是多行文本输入。否则，它将不起作用。

<TextInput
  style={{height: this.state.height, borderColor: 'gray', borderWidth: 1}}
  onChangeText={::this.onMessageChange}
  value={this.props.message}
  multiline
  onContentSizeChange={({ nativeEvent: { contentSize: { width: txtWidth, height: txtHeight } } }) => {
    if (txtHeight > 40) {
      this.setState({
         height: txtHeight,
      });
    }
  }}
/>