制作多行,使用React-Native扩展TextInput

Question

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

看看SlackTextViewController但a)似乎它有很多我不想要的东西和b)我想尽可能多地保留React中的代码(以及尽可能多的Objective-C/swift) .

编辑:只是想强调我更喜欢REACT(JAVASCRIPT)代码,如上所述,而不是Objective-C或Swift.

Answer 1

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

1)屏幕外文字高度

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

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

2)原生模块

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

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

3)Github PR

我真的希望这个公关被接受.它看起来自动做这样的事情.

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

Answer 2

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