制作多行，用React-Native扩展TextInput
我正在开发一个反应原生的应用程序，需要一个与iOS上的“消息”应用程序中的textviewfunction相似的TextInput，它应该从一行开始，然后优雅地扩展到更多的行，直到一些限制（如5文本行），然后根据需要开始滚动到最后一行。
看了一下SlackTextViewController但a）似乎有很多东西，我不想和b）我想尝试保持尽可能多的代码在React（并在Objective-C / Swift以外）作为可能。
编辑：只是想强调，我更喜欢REACT（JAVASCRIPT）代码，如上所述，而不是Objective-C或Swift。
今天我尝试了两种不同的方式来做到这一点。 也不是最好的，但我认为我会logging我的努力，以防他们有用。 他们都肯定有你要找的效果，虽然有时推迟了所有的asynchronous通信。
1）屏幕文字高度
所以就在TextInput下面，我添加了一个具有相同字体和填充等的常规文本字段。 我在input上注册了onChange监听器，并调用了setState({text: event.nativeEvent.text}) 。 文本文件从国家得到它的价值。 两个都有onLayout听众。 基本上，目标是从（无限制）文本中获取TextInput的高度。 然后我把文字的方式隐藏起来
https://gist.github.com/bleonard/f7d748e89ad2a485ec34
2）本机模块
真的，我只需要真正的 UITextView中的内容的高度。 所以我向RCTUIManager添加了一个类别，因为有几个方法已经有帮助了。 我摆脱了隐藏的文字视图。 所以改变，我要求高度，并通过国家以相同的方式使用它。
https://gist.github.com/bleonard/6770fbfe0394a34c864b
3）Github PR
我真的希望这个公关被接受。 它看起来像这样做自动。
将multiline={true}添加到TextInput将允许滚动，如果文本的数量超过了可用空间。 然后，您可以通过访问onChange prop中的事件的nativeEvent.contentSize.height来更改TextInput的高度。
class Comment extends Component { state = { text: '', height: 25 } onTextChange(event) { const { contentSize, text } = event.nativeEvent; this.setState({ text: text, height: contentSize.height > 100 ? 100 : contentSize.height }); } render() { return ( <TextInput multiline style={{ height: this.state.height }} onChange={this.onTextChange.bind(this)} value={this.state.text} /> ); } }
实现UITextView的委托方法textViewDidChange并用rect进行播放
- (void)textViewDidChange:(UITextView *)textView { CGSize constraintSize = CGSizeMake(textView.frame.size.width, MAXFLOAT); CGRect textRect = [textView.text boundingRectWithSize:constraintSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:textView.font} context:nil]; NSLog(@"Frame:%@", NSStringFromCGRect(textRect)); CGRect newRect = textView.frame; newRect.size.height = textRect.size.height; textView.frame = newRect; }
截至10月17日，Wix有一个很好的组件可以做到这一点：
https://github.com/wix/react-native-autogrow-textinput
用法可以非常简单：
<AutoGrowingTextInput style={styles.textInput} placeholder="Enter text" value={this.state.text} onChangeText={this._handleChangeText} />
还有一些额外的道具，例如minHeight和maxHeight 。
我在RN 0.47.2上使用它