在 React Native 中用视图替换特定文本

Question

我有一个文本字符串，在字符串中有像“__”（两个下划线）这样的字符，每当我遇到两个下划线时，我想用像框这样的特定视图替换它们并渲染它，例如：

str = "iam __ and i want to go to __"

所以我想渲染 iam（想在这里渲染矩形框）并且我想去（这里是矩形框）

我已经尝试在 js 中使用拆分函数并将它们拆分为 __ 并尝试根据条件将 jsx 推送到数组但是它在不同的行中呈现有没有更好的方法来做到这一点我试过的代码：

const stringsArr = str.split('__');
    const toRender = []
    for(let i=0;i<stringsArr.length;i++){
        toRender.push(<Text styles={styles.emptyBlock} />)
        toRender.push(<Text>{stringsArr[i]}</Text>)
  }

Answer 1

默认情况下，组件将呈现在彼此下方。在每个文本行周围包裹一个 View 并为其赋予 flexDirection: 'row' 样式，以便它们并排呈现。如果你想让它像一个段落一样工作，那么也应用 flexWrap: 'wrap'。

在 React Native 中用视图替换特定文本

replace specific text with view in reactNative

react-native

styling

text-styling