Question

嗨，我有一个嵌套的文本组件，可显示带有突出显示文本的搜索结果。我想在突出显示的查询文本下划线，但无法删除该文本组件的子项的textDecorationLine。我需要嵌套文本组件，因为我想包装文本。

代码如下：

  <Text style={styles.text}>
      Normal Text
        <Text style={styles.highlighted}>
          Highlighted Text
        <Text style={styles.text}>
          Normal Text
        </Text>
      </Text> 
  </Text>

const styles = StyleSheet.create({
  snippet: {
    textDecorationLine: 'none',
    textDecorationColor: 'orange',
  },
  highlight: {
    textDecorationLine: 'underline',
    textDecorationColor: 'orange',
  },
});

预期的行为：

普通文本（带下划线）突出显示文本（带下划线）普通文本

结果：

普通文本（带下划线）突出显示普通文本（带下划线）

Answer 1

您可以通过将textDecorationColor设置为对子文本透明来解决此问题：

修改

textDecorationColor是仅限iOS的道具。

代码：

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.snippet}>
      Normal Text
        <Text style={styles.highlight}>
          Highlighted Text
        <Text style={{textDecorationColor: 'transparent'}}>
          Normal Text
        </Text>
      </Text> 
      </Text>
      </View>
    );
  }
}

演示：

重要！请确保选择小吃上的iOS标签。 Web选项卡的行为不像实际的本机项目。

https://snack.expo.io/@tim1717/courageous-peach

Answer 2

您可以通过提供与要隐藏下划线的背景颜色相同的textDecorationColor来摆脱困境。

给您一个demo

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <Text style={styles.text}>Normal Text
          <Text style={styles.highlighted}> Highlighted Text </Text>
          <Text>Normal Text</Text>
        </Text> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  app: {
    backgroundColor: 'white'
  },
  text: {
    textDecorationLine: 'underline',
    textDecorationColor: 'orange',
  },
  highlighted: {
    textDecorationLine: 'underline',
    textDecorationColor: 'white',
  }
});

export default App;

Answer 3

您可以关闭“突出显示”文本视图以实现此行为

完整代码

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          Normal Text 
          <Text style={styles.highlight}> Highlighted Text</Text>
          <Text> Noraml Text</Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 16,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  highlight: {
    textDecorationLine: 'underline',
    textDecorationColor: 'orange',
  },
});

小吃链接：https://snack.expo.io/@mehran.khan/underlinetext

Answer 4

您可以尝试以下方法：

<Text style={styles.snippet}>
  Normal Text
  <Text style={styles.highlight}>
    Highlighted Text
    </Text>
    <Text style={styles.snippet}>Normal Text</Text>
</Text>

Answer 5

textDecorationLines: "none"

从React Native的嵌套文本组件中删除textDecorationLine

5 个答案: