ReactNative将粗体或斜体添加到字段中的单个单词

如何使文本字段中的单个单词加粗或斜体?有点像这样:

如何使文本字段中的单个单词加粗或斜体?有点像这样:

<Text>This is a sentence <b>with</b> one word in bold</Text>

如果我为粗体字符创建一个新的文本字段,它会将其分隔到另一行,所以这肯定不是这样做的方式。这就像在 & lt;p & gt;标签中创建一个 & lt;p & gt;标签只是为了使一个单词加粗。

315

您可以使用<Text>作为其他文本组件的容器。

...
<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontWeight: "bold"}}> with</Text>
  <Text> one word in bold</Text>
</Text>
...

这里是一个example

88

对于一个更像网络的感觉:

const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
<Text>I am in <B>bold</B> yo.</Text>
12

您可以使用https://www.npmjs.com/package/react-native-pd-text

import PdText from 'react-native-pd-text';
 
cl Example extends React.Component {
  static displayName = 'Example';
 
  handleUrlPress(url) {
    LinkingIOS.openURL(url);
  }
 
  handlePhonePress(phone) {
    AlertIOS.alert(`${phone} has been pressed!`);
  }
 
  handleNamePress(name) {
    AlertIOS.alert(`Hello ${name}`);
  }
 
  handleEmailPress(email) {
    AlertIOS.alert(`send email to ${email}`);
  }
 
  renderText(matchingString, matches) {
    // matches => ["[@michel:5455345]", "@michel", "5455345"]
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    return `^^${match[1]}^^`;
  }
 
  render() {
    return (
      <View style={styles.container}>
        <PdText
          style={styles.text}
          p={
            [
              {type: 'url',                       style: styles.url, onPress: this.handleUrlPress},
              {type: 'phone',                     style: styles.phone, onPress: this.handlePhonePress},
              {type: 'email',                     style: styles.email, onPress: this.handleEmailPress},
              {pattern: /Bob|David/,              style: styles.name, onPress: this.handleNamePress},
              {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
              {pattern: /42/,                     style: styles.magicNumber},
              {pattern: /#(\w+)/,                 style: styles.hashTag},
            ]
          }
          childrenProps={{allowFontScaling: false}}
        >
          Hello this is an example of the PdText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
          But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
          And the magic number is 42!
          #react #react-native
        </PdText>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 
  url: {
    color: 'red',
    textDecorationLine: 'underline',
  },
 
  email: {
    textDecorationLine: 'underline',
  },
 
  text: {
    color: 'black',
    fontSize: 15,
  },
 
  phone: {
    color: 'blue',
    textDecorationLine: 'underline',
  },
 
  name: {
    color: 'red',
  },
 
  username: {
    color: 'green',
    fontWeight: 'bold'
  },
 
  magicNumber: {
    fontSize: 42,
    color: 'pink',
  },
 
  hashTag: {
    fontStyle: 'italic',
  },
 
});
11

它不在文本字段中,而是将单独的文本元素包装到视图中将给出所需的输出。如果您不想将另一个库添加到您的项目中,只是为了设置几个文本的样式,可以使用此方法。

<View style={{flexDirection: 'row'}}>
 <Text style={{fontWeight: '700', marginRight: 5}}>Contact Type:</Text>
 <Text>{data.type}</Text>
</View>

会产生如下结果

enter image description here

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(150)
更改阵列中矩阵的名称失败(names from the matrix)
上一篇
条件变量 C# /.NET
下一篇

相关推荐

  • vb如何编写程序代码Private Sub Form_Load() ' 设置窗口标题 Me.Caption = He

    示例示例VB程序代码的编写是通过使用Visual Basic编程语言来实现的。下面是一个简单的VB程序代码示例:'示例代码…

    2023-03-14 15:57:06
    0 49 13
  • code键 A Guide to Success

    示例示例code键是一个特殊的键,它可以用来输入代码。它通常位于键盘的右上角,并且有一个特殊的图标,如“#”或“@”。下面是一个简单的代码示例,使用code键来输入代码:…

    2023-02-13 08:43:06
    0 85 40
  • type c接口是啥改变你的充电体验

    示例示例Type C接口是一种新型的USB连接器,它可以支持更高的数据传输速度,比传统的USB 0接口更快。与传统的USB接口不同,Type C接口可以在两端都使用,无需额外的翻转,使连接更加方便快捷。下面是一个使用Type C接口的代码示例:…

    2023-01-12 02:06:09
    0 14 45
  • good catch什么意思:好抓住!让你的梦想变成现实

    示例示例Good catch是一种表扬语,用来表扬某人发现了一个有价值的信息或问题。它可以用来表扬别人的观察力、思考能力和分析能力。例如:…

    2023-02-17 03:14:17
    0 81 75
  • carwings是什么意思智能汽车连接系统的未来

    Carwings是日产汽车公司推出的一款远程智能汽车服务,它可以帮助用户远程监控汽车的状态和行驶信息,并且可以远程控制汽车的功能。…

    2023-01-19 13:55:38
    0 24 74
  • cvt变速箱油分几种:CVT变速箱油的种类及用法

    cvt变速箱油一般分为三种,分别是:传统cvt变速箱油:代码:CVT-1…

    2023-01-27 12:23:25
    0 25 16
  • cv人生履历:从零开始,一步步走向成功——[姓名]的职业生涯

    cv人生履历是一种概括性的文件,用于描述一个人的教育背景、工作经历、技能、专业知识和其他重要信息的文件。它可以帮助雇主评估求职者的资格,并决定是否面试或录用他们。…

    2023-02-01 13:25:09
    0 42 96
  • cs go 国际服挑战国际赛场,体验全新竞技乐趣

    CS GO国际服是一种多人在线游戏,由Valve Corporation开发,可以在Steam平台上进行游戏。它是一款基于Counter-Strike系列游戏的竞技游戏,玩家可以在两个不同的队伍中进行游戏,一个是攻击者(Terrorists),另一个是防守者(Counter-Terrorists)。玩家可以通过购买武器,装备,技能,以及其他道具来提高游戏能力。…

    2023-03-08 00:34:44
    0 93 39

发表评论

登录 后才能评论

评论列表(7条)