React Native的TextInput无法显示输入的文本

Question

我想实现一个使用React Native的简单iOS应用程序。 但是，我卡在了TextInput元素的问题上。

它工作正常，直到我尝试下一步：

1.输入一些长文本（文本应比输入本身更长）；

2.把光标移动到文本的开头；

3.尝试输入一些内容。

我期望在我输入 "abc" 后，它会变成这样：

然而，由于某些原因，结果是这样的：

即，输入了abc，但光标仍停留在初始（最左侧）位置，输入的文本不可见。我必须自己将光标向左移动才能看到文本。这不是预期的行为：作为用户，我觉得输入被破坏了，我的文本根本没有输入。

到目前为止，我没有找到任何解决方案。这是React Native的一个错误还是我做错了什么？

谢谢。

更新＃1

创建了一个简单的Expo项目来重现这个问题。

更新＃2

看起来是React Native的问题。已报告该问题并实施了@HelmerBarcos提出的解决方法（使用multiline={true}）。

- yaskovdev

---

我认为你在样式方面犯了一些错误。这是来自react-native的TextInput组件吗？你能否分享一个最小、完整和可验证的示例？ - Helmer Barcos

@HelmerBarcos，感谢您的快速评论。我将准备一个最小可能的项目来重现这个问题，并更新问题的链接。 - yaskovdev

好问题。我刚发现我的应用程序也有同样的问题。行为很奇怪。 - Nikhil

您好，我遇到了同样的问题，您找到解决此问题的方法了吗？ - Nicolas De Tiesenhausen

@NicolasDeTiesenhausen，我实现了Helmer Barcos在评论中提出的解决方法：https://github.com/motivepick/motive-mobile-app/blob/master/app/components/common/UniversalInput.js，也许你可以尝试同样的方法。 - yaskovdev

Answer 1

我曾遇到同样的问题，并通过添加以下内容解决：

flex: 1

在文本输入样式方面。

- Ariel

Answer 2

问题在于您没有正确使用TextInput组件的相应属性或props。为了更好地理解它们的用法，请阅读React Native组件的官方API文档，其中包括TextInput Component Documentation。

您需要使用placeholder prop，它应该能正常工作。可能是您的StyleSheet上还有其他错误。

我为您创建了一个Expo example，以展示正确的方法。如果您想进行实验，可以在那里添加自己的代码。

- Helmer Barcos

---

谢谢您的回答和示例！不幸的是，“placeholder”并不是我需要的。用户应该有可能使用文本输入编辑先前输入的文本。占位符不能给用户这样的可能性。至于样式表，那绝对不是原因（通过注释掉我极简示例中的所有样式表进行了检查）。 - yaskovdev

尝试使用 multiline={true} 属性，它允许您编辑值并正确显示新值。我在我的Expo中进行了编辑，请看一下。 - Helmer Barcos

谢谢。我决定实现你提出的解决方法（使用 multiline={true}）。我已经更新了我的问题。 - yaskovdev

Answer 3

你只需要添加：selection={{ start: 0 }}

<TextInput
label={"My Label"}
value={"Your LOOOOONNG TEXT"}
selection={{ start: 0 }} //<- Only put this
/>

- Wiharlley Yitzhak