Question

在html中，我可以通过

实现

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

但是在react native中如何实现此功能，以便仅将颜色应用于文本。

Answer 1

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

要设置Text的颜色，可以使用其color属性

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

对于该文本的背景色，您可以使用View，然后设置该backgroundColor的{{1}}

Answer 2

在react native中，您可以直接使用“文本”组件并对其应用“ backgroundColor”样式，如下所示：

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

Answer 3

您不能在IOS上使用。为多余的{ "name": "id", "type": "INTEGER", "mode": "NULLABLE" }, { "name": "time", "type": "DATE", "mode": "NULLABLE" }, { "name": "comment", "type": "STRING", "mode": "NULLABLE" }设置backgroundColor

View

Answer 4

尝试这个：

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

Answer 5

import { Text } from 'react-native';

<Text style={{backgroundColor: 'green'}}>
  Ketan
</Text>

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

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

Answer 6

如果您希望背景色仅包含文本，则可以使用以下方法：

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

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

如何仅在本机中为文本设置背景色

6 个答案: