使用 ReactNative 制作多行扩展 TextInput

发布于08月01日

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

看了一下SlackTextViewController，但a)它似乎有很多我不想要的东西，b)我想尽量在React(以及objective-C/swift)中保留尽可能多的代码.

Edit: Just want to emphasize that I would prefer REACT (JAVASCRIPT) code, as stated above, rather than Objective-C or Swift.

1) Offscreen Text height

所以就在TextInput下面，我添加了一个常规文本字段，具有相同的字体和填充等等.我在输入端注册了onChange个监听器，然后拨打了setState({text: event.nativeEvent.text}).提交的文本从州政府那里获得了价值.两人都有onLayout名听众.基本上，目标是从(不受限制的)文本中获取文本输入的高度.然后我把文字隐藏在屏幕外

2) Native Module

真的，我只需要real UITextView中内容的高度.所以我在RCTUIManager中添加了一个类别，因为已经有几种方法很有用.我go 掉了隐藏的文本视图.所以onChange，我要求的高度，并通过国家以同样的方式使用.

使用 ReactNative 制作多行扩展 TextInput

推荐答案

1) Offscreen Text height

2) Native Module

3) Github PR

React-native相关问答推荐

防止 React Native 在上下文值更改时重新安装组件

使用 Auth Token 标头react 本机图像，如何处理 401？

react平面列表渲染项

如何在 React Native 中正确地将组件导入到我的导航器中？

如果没有启用远程调试器，React Native 代码将无法工作

请求无法完成，因为您已超出配额

create-react-native-app myproject和react-native init myproject之间的真正区别是什么

更改整个 React Native App 的语言

如何在 mac 上卸载 react-native-cli？

如何启用 stacktrace react-native run-android 命令？

React Native 中如何使用 Flex 居中组件？

redux-observable Promise 在单元测试中没有得到解决

react-native 从右到左

React Native ScrollView 在snapping后重新回到顶部

XCode AppIcon 基于方案

如何在 react-native 中从 AsyncStorage 中删除元素

当前文件夹中的 react-native init

在 OPTIONS 响应后使 fetch API 与 CORS 一起工作

ListView 和 FlatList 有什么区别？

zoom 到指定的标记 react-native-maps