React-native 以编程方式滚动多行 TextInput答案

【问题标题】：React-native programmatically scrolling multiline TextInputReact-native 以编程方式滚动多行 TextInput
【发布时间】：2017-11-06 10:47:34
【问题描述】：

我想知道如何使用 multiline 参数在 TextInput 内向下滚动？我看到了函数onContentSizeChange，但我没有看到任何以编程方式使用内部滚动的选项。

这是一个可以玩的世博小吃（以目前的情况） https://snack.expo.io/S1Gpa3pRb

关键是我正在尝试将 TextInput 向下滚动到新的一行。

（p.s 我正在使用 android，我也有一个 autoGrow 选项，但我想在某些方面限制它（这部分很容易制作），但在达到限制后，我得到的反应与世博会显示的相同，TextInput 不会向下滚动。）

谢谢！

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

我们在我工作的地方也遇到了同样的问题。我们首先尝试用 keyBoardAvoidingView 组件解决滚动问题：

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

但这只是解决了我们的部分问题，真正完全解决问题的是一个名为 react-native input-scrollview 的插件：

https://github.com/baijunjie/react-native-input-scroll-view

这个插件应该可以解决你的问题。在多行上，它会在用户键入时跟随用户，并且会自动将它们移动到新行。一次尝试一个，看看它们中的任何一个是否有效。

希望这在某种程度上有所帮助！ :)

【讨论】：

【解决方案2】：

您可以在 ScrollView 中添加 TextInput。首先创建一个引用const scrollViewRef = useRef();

然后添加以下代码。

<ScrollView 
  ref={scrollViewRef}>
<TextInput 
  onFocus={() => scrollViewRef.current.scrollToEnd({ animated: true})} 
  multiline={true} />
</ScrollView>

【讨论】：