Question

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

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

注意：我在skillDescription中存储了很多字符串，所以我不能在我的Text组件中使用硬代码样式

Answer 1

您可以做的最好的事情是将字符串保存为HTML字符串，并使用https://github.com/archriss/react-native-render-html呈现HTML。

您可以使用类并在您的react-native代码中定义它们。

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

s100b

Answer 2

有一个很简单的方法！就是这样：

 <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 3

要向您的React Native组件添加样式，您可以使用style属性-文档here。

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

简单变体（如@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中的文本组件中编辑某些单词的字体颜色

3 个答案: