如何在 TextInput 行之间放置文本？答案

【问题标题】：How to put a Text between TextInput lines?如何在 TextInput 行之间放置文本？
【发布时间】：2017-10-26 16:46:15
【问题描述】：

我正在尝试创建一个自定义组件，该组件由 TextInput 上方的 Text 组成，该 TextInput 将单词包裹在一起。我想要达到的效果是在 TextInput 的每一行之间都有一个 Text，这样当在 TextInput 中输入某些内容时，某些内容会直接显示在 Text 的上方。 TextInput 之间的行不可编辑，这一点很重要。知道怎么做吗？ I included a picture to better explain. 上图是我想要得到的行为，下图是它的外观。

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

如果我的问题是正确的，那么this is your solution

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             >
            >
            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Username"

                />
        </android.support.design.widget.TextInputLayout>

在项目的 build.gradle 文件中，在项目的依赖项中添加以下行：

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:design:22.2.0'
compile 'com.android.support:appcompat-v7:22.2.0'

}

【讨论】：

我添加了一张图片以便更好地解释。

【解决方案2】：

您可以创建一个自定义组件，在状态中存储一个字符串数组（用户的输入）。在渲染函数中，您可以遍历数组并为每个项目渲染一个 Text 和一个 TextInput。您将禁用除最后一个之外的所有 TextInputs 的编辑，以便它们看起来可以在输入结束时进行编辑。当 TextInput 将被强制换行时，您可以向状态字符串数组添加一个新条目。这将是相当复杂的，但希望这是你的起点

【讨论】：

谢谢。你给了我一个我想尝试的想法。我正在考虑利用 onContentSizeChange/onLayout 来确定他们何时需要包装并执行您所说的其余部分。我会告诉你进展如何。