react-native - 用 reactNative 中的视图替换特定文本

Question

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

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

所以我想渲染iam（想在这里渲染矩形框），我想去（这里的矩形框）

我已经尝试在 js 中使用 split 函数并将它们拆分为 __ 并尝试根据条件将 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

默认情况下，组件将在彼此下方呈现。在每个文本行周围环绕 aView并为其设置样式，flexDirection: 'row'以便它们并排呈现。如果您希望它像段落一样工作，那么也适用flexWrap: 'wrap'。