我可以使用React Native将样式应用于用户输入中的一部分文本吗？

Question

让我们在TextInput元素中说，如果他们将单词写完后立即将其格式化为@someonesusername（而不是在提交文本之后，在这种情况下，将文本发送到我想到了一个带有子集样式的普通Text组件，我想在一个Text组件的绝对位置上放置一个底层，并使实际的TextInput组件不可见，但是似乎保持同步很麻烦，并且在编辑光标时会造成可用性挑战除非您将自定义光标元素连接在一起进行渲染，否则不会在那里，而对于我想做的这么小的事情来说，这将是非常头痛的事情。

Answer 1

所以这是我想到的一个技巧（一个惊人的问题）。 React native TextInput可以将子代作为输入。因此，为什么不分割值并在Text中将TextInput作为子项添加，并按所需方式添加样式。 可能想知道如何找回文字？好了，这些子级在进行onChangeText回调时成为字符串，并在您的状态下返回字符串。 例如：

// split the text like
const [firstPart, secondPart] = this.state.text.split("@");
const [higlighted , restText] = secondPart ? secondPart.split(' ') : [];

然后使用它们

<TextInput
  style={{height: 40, borderColor: 'gray', borderWidth: 1}}
  onChangeText={this.onChangeText}
>
  <Text style={styles.paragraph}>
    <Text>{firstPart}</Text>
    {higlighted && <Text style={{
      color: 'blue'
    }}>@{higlighted}</Text>}
    {restText !== undefined && <Text> {restText}</Text>}
  </Text>
</TextInput>

嗯，我接受这可能是更糟糕的解决方案，但这可行：P

完整示例： https://snack.expo.io/@subkundu/react-native-styles-to-a-subset-of-the-text