制作多行，使用React-Native扩展TextInput [英] making a multiline, expanding TextInput with React-Native

问题描述

我正在开发一个本机应用程序，并且需要一个TextInput，其功能与iOS上messages应用程序中的textview类似 - 它应该从一行开始，然后优雅地扩展到更多行，直到某些限制（比如5行文本），然后根据需要开始滚动到最新行。

I'm working on a react-native app and need a TextInput that has similar functionality to the textview in the "messages" app on iOS—it should start out as one line and then gracefully expand to more lines until some limit (like 5 lines of text) and then start scrolling along to latest line as needed.

看看 SlackTextViewController

Took a look at the SlackTextViewController but a) seems like it has a lot of stuff that I don't want and b) I'd like to try to keep as much code in React (and out of objective-C/swift) as possible.

编辑：只是想强调我更喜欢REACT（JAVASCRIPT）代码，如上所述，而不是Objective-C或Swift。

推荐答案

今天我尝试了两种不同的方法。两者都不是最好的，但我想我会记录我的努力，以防它们有用。他们都肯定有你想要的效果，虽然有时延迟了所有的异步通信。

I tried two different ways to do this today. Neither are the best but I thought I'd record my efforts in case they are helpful. They both definitely had the effect you are looking for, though sometime delayed with all the async communication.

所以在TextInput下，我添加了一个带有相同字体和填充等的常规Text字段。我在输入上注册了 onChange 监听器，并调用了 setState（{text：event.nativeEvent.text}）。文本归档从州获得了它的价值。两者都有 onLayout 听众。基本上，目标是从（不受限制的）Text获取TextInput的高度。然后我将屏幕上的文字隐藏起来

So just under the TextInput, I added a regular Text field with the same font and padding and such. I registered the onChange listener on the input and called setState({text: event.nativeEvent.text}). The Text filed got its value from the state. Both had onLayout Listeners. Basically, the goal was to get the height for the TextInput from the (unrestricted) Text. Then I hid the Text way offscreen

https://gist.github。 com / bleonard / f7d748e89ad2a485ec34

真的，我只需要高度真实 UITextView中的内容。所以我在RCTUIManager中添加了一个类别，因为有几种方法已经有用了。我摆脱了隐藏的文本视图。所以 onChange ，我要求高度并通过状态以相同的方式使用它。

Really, I just needed the height of the content in the real UITextView. So I added a category to RCTUIManager as there are several methods there already that are helpful. I got rid of the hidden Text view. So onChange, I ask for the height and use that in the same way via the state.

https://gist.github.com/bleonard/6770fbfe0394a34c864b

我真的希望这个PR被接受。它似乎会自动执行此类操作。

What I really hope is that this PR gets accepted. It looks to do something like this automatically.

https： //github.com/facebook/react-native/pull/1229

这篇关于制作多行，使用React-Native扩展TextInput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！