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

时间:2016-08-08 23:00:13

标签: javascript ios react-native

我在使用React-Native

TextInput 模块时遇到问题

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

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

另一方面,对于iOS,除非你在样式中为TextInput提供显式高度,否则它将为0.

这通常没问题,但因为我在我的应用程序中使用可变字体大小。我需要TextInput高度来匹配字体大小。

我确实尝试将文本输入高度设置为与font-size相同的值。这不能正常工作,我不认为这两者是相对的。

我有一些多行文字输入,我想根据一行的高度来计算我想要的高度。

伪代码

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

总结一下。如何根据font-size(事先知道)获取TextInput视图的高度。

1 个答案:

答案 0 :(得分:1)

您可以使用 onContentSizeChange 获取多行textinput上的字体高度。在使用太长的文本后,我正在使用它来更改textinput的高度。但请确保您使用的是多行TextInput。否则,它将无法工作。

<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,
      });
    }
  }}
/>