【问题标题】:how to set background color to the text only in react native如何仅在本机反应中为文本设置背景颜色
【发布时间】:2018-07-16 09:05:45
【问题描述】:

在html中我可以通过

来实现
<span style="background-color:red">ketan</span>

但在本机反应中如何实现这一点,以便颜色仅应用于文本。

【问题讨论】:

标签: react-native react-native-flexbox


【解决方案1】:

如果你希望背景颜色只包含文本,你可以使用这个:

<Text style={{backgroundColor: 'blue', alignSelf: 'flex-start'}}>
    Ketan
</Text>

根据需要更改 alignSelf,如果您不希望文本占据容器的整个宽度,则需要设置此属性

【讨论】:

  • 工作就像一个魅力。没有 AlignSelf 是问题
  • 为我工作,你也可以添加一个父视图,你可以设置如下属性:alignSelf:'flex-start',borderRadius:10,溢出:'hidden',backgroundColor:'red',
【解决方案2】:

在 react native 中,您可以直接使用“Text”组件并为其应用“backgroundColor”样式,如下所示:

<Text> 
    <Text style={{ backgroundColor: "red", color: "white" }}>color
    </Text>
</Text>

【讨论】:

  • ketan
  • @ketan kulkarni,没明白你的意思。
  • @Sandip Lipane 我尝试了许多组合,例如将背景颜色应用于文本,查看但仍然占用全宽度我正在尝试使用 TouchableOpacity 和 Text 设计一个按钮,我希望应用背景颜色仅限文本
  • @ketan kulkarni,请访问此链接facebook.github.io/react-native/docs/text.html 并尝试使用 backgroundColor 样式修改现有示例。我已经验证并且它正在工作。你能验证一次吗?
  • 如果我写 背景 color
【解决方案3】:

在 react native 中,您有 Text 组件来显示文本。

要设置Text的颜色,你可以使用它的color属性

<Text style={{color:'#ff0000'}}>Your Text</Text>

对于该文本的背景颜色,您可以使用View 而不是设置backgroundColor of that View

【讨论】:

  • 我尝试了以下 1) n 2) n 但输出相同
【解决方案4】:

你不能在 IOS 上。为额外的View设置背景颜色

<View style={{backgroundColor: 'red',flex:1}}><Text >ketan
    </Text></View>

【讨论】:

  • 试试flex:1flex:0
  • 这对我有用&lt;Text&gt; &lt;Text style={{ backgroundColor: "red", color: "white" }}&gt;color&lt;/Text&gt; &lt;/Text&gt;
【解决方案5】:

试试这个:

<Text style={{backgroundColor:'red', color:'white'}}>{'Message'}</Text>

【讨论】:

    【解决方案6】:
    import { Text } from 'react-native';
    
    <Text style={{backgroundColor: 'green'}}>
      Ketan
    </Text>
    

    为了将文本放入 ReactNative,您需要 Text 组件。您可以将backgroundColor 应用到style 属性上。

    这里有一个 snack 作为演示,用于展示用法和作为您玩耍的游乐场

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-08-14
      • 2013-07-29
      • 1970-01-01
      • 2020-10-12
      • 1970-01-01
      • 1970-01-01
      • 2019-09-09
      • 2018-08-22
      相关资源
      最近更新 更多