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

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',
  },
});

预期行为：

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

结果：

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

标签： react-native

Answer 1

You can overcome this issue by setting the textDecorationColor to transparent for the child text:

Edit

textDecorationColor is a iOS-only prop.

Code:

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>
    );
  }
}

Demo:

Important! Make sure to select iOS tab on snack. The web tab does not behave like a real react-native project.

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