如何在 React Native 中的文本组件中编辑某些单词的字体颜色

Question

我知道 React Native 在他们的文档中有一个关于这个问题的教程，但我的问题完全不同，因为在文本组件中渲染的字符串来自数据库而不是硬编码。

我有这个技能描述字符串存储在我的 firebase 数据库中。我想编辑一些单词的颜色，不幸的是结果给了我纯字符串。我的问题是如何编辑这些数据中的一些单词？

注意：我在 SkillDescription 中存储了许多字符串，所以我不能只在文本组件中硬编码样式

Answer 1

有一个非常简单的方法！就像这样：

 <Text style={{ color: "black" }}>let's <Text style={{ fontWeight: 'bold', color: "green" }}>help</Text> to eachother in <Text style={{color:"red"}}>science</Text> .</Text>

Answer 2

您能做的最好的可能是将字符串保存为 HTML 字符串并使用 https://github.com/archriss/react-native-render-html 来渲染 HTML。

您可以使用类并在您的反应本机代码中定义它们。

一个示例（htmlBody）是从数据库读取的 html：

<HTML 
    html = {htmlBody}
    tagsStyles = {{
       span:  {fontSize: 16}, 
       p:     {fontSize: 16, color: 'green'}
    }}
    classesStyles = {{
     'ql-size-large': {fontSize: largeSize, color:'red'},
     'ql-size-small': {fontSize: smallSize, color:'yellow'}
    }
}/>

Answer 3

有点晚了，但这是解决方案。

您可以使用defaultTextProps，它允许您进行样式设置。

例如

从“react-native-render-html”导入 HTML；

道具整合

const defaultTextProps = { 风格： { 左填充：10，颜色：Colors.input_title，字体大小: wp("4.2%"), 字体家族：fonts.poppins_medium， }, };

这个解决方案对我有用。

Answer 4

要向 React Native 组件添加样式，您可以使用

style

属性 - 文档这里。

添加样式有很多不同的变体，我们采用两种简单的方法：

简单变体（如 @Mahdi Eslami 所示），将样式属性直接添加到样式属性中，如下所示：
```
<Text style={{color: "red"}}>Lorem lipsum</Text>
```

在单独变量中定义样式的变体，如下所示：

const styles = StyleSheet.create({
  red: {
    color: 'red'
  }
});
<Text style={styles.red}>Lorem lipsum</Text>

如何在 React Native 中的文本组件中编辑某些单词的字体颜色

问题描述投票：0回答：4

4个回答

最新问题

如何在 React Native 中的文本组件中编辑某些单词的字体颜色

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4