Question

我想通过更改文本的背景颜色来突出显示React Native应用程序中的多行文本。问题是背景颜色在整个文本区域中发生变化，而不仅仅在单词下面。

class Example extends Component {
  render() {
    const text = '...';

    return (
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>
          {text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 200,
  },
  textStyle: {
    backgroundColor: 'red',
  },
});

上面的代码会产生如下内容： current output

但我希望它看起来像这样： expected output

我可以通过拆分文本并将背景颜色添加到单个单词来获得该结果：

class Example extends Component {
  render() {
    const text = '...';

    const brokenText = text.split(' ').map(word => (
      <Text style={styles.textStyle}>{word} </Text>
    ));

    return (
      <View style={styles.textContainer}>
        {brokenText}
      </View>
    );
  }
}

但是将文本拆分为单个单词似乎不是最佳解决方案，并且具有巨大的性能成本。有没有更清洁的方法呢？

Answer 1

这仍然不合适，但是我按照您的期望进行渲染，方法是在每个单词之间添加一个不可见的字符（此处为非空格），因此文本在其上折断而没有背景色。这是代码：

        const val = this.signupForm.value;
        this.authService.doRegister(val)
            .then(res => {
                this.msg = 'You have registered successfully!';
                this.msgType = 'success';
                this.authService.updateUser(val.name, null)
                    .then(suc => {
                        const created = firebase.firestore.FieldValue.serverTimestamp();
                        const user = {
                            first_name: val.name,
                            last_name: '',
                            email_personal: val.email,
                            created: created,
                            updated: created
                        };
                        this.userCollection = this.afs.collection<User>('users');
                        this.userCollection.doc(suc).set(user);
                    }, err => {
                        // console.log(err);
                    });
                this.router.navigate(['/']);
            }, err => {
                this.msg = err.message;
            })

这是小吃，您可以在其中查看结果并进行操作： https://snack.expo.io/@adesurirey/properly-highlight-text-with-react-native

它肯定可以改进，我很乐意获得反馈。

Answer 2

我认为问题是组件上的display css属性。

您的组件似乎使用display: block;代替display: inline;

进行渲染

参见示例：https://jsfiddle.net/oorangecchicken/2qkey6o9/

Answer 3

我已经完成了你可以看看。

  ldap_bind: Invalid credentials (49)

Answer 4

尝试使用

react-highlight-words库可以满足您的需求或使用react-native-highlight-words库。

这两个库均来自节点程序包highlight-words-core

Answer 5

Lodash的简单功能

  const highLightWord = (word, highlight) => {
    const match = _.words(word, RegExp(highlight)); // "Aku"
    const notMatch = _.replace(word, match, ""); // "rana"
    return (
      <View style={{ flexDirection: "row" }}>
        <Text style={{ backgroundColor: "yellow" }}>{match}</Text>
        <Text>{notMatch}</Text>
      </View>
    );
  };

return (
 {highListSearch("Akurana", "Aku")}
)

如何在React Native中正确突出显示文本？

5 个答案: