如何仅在本机反应中为文本设置背景颜色答案

【问题标题】：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>

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

【问题讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

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

【讨论】：

试试flex:1 或flex:0
这对我有用<Text> <Text style={{ backgroundColor: "red", color: "white" }}>color</Text> </Text>

【解决方案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 作为演示，用于展示用法和作为您玩耍的游乐场

【讨论】：