如何使 View 元素的所有 Text 子元素具有相同的样式？

Question

我想要类似 CSS 的东西，你可以为 div 赋予“颜色”样式，并且其中的任何文本都会有它。

我在一个视图组件中有多个文本组件，我希望它们都具有相同的文本颜色。

如果我将“颜色”样式传递给视图，它会发出警告。

当他们的父母可以拥有所有孩子的样式时，我想避免将相同的样式传递给所有这些孩子。

我想从此开始：

<View>
  <Text style={styles.Warning}>
  </Text>
  <Text style={styles.Warning}>
  </Text>
  <Text style={styles.Warning}>
  </Text>
  <Text style={styles.Warning}>
  </Text>
  <Text style={styles.Warning}>
  </Text>
</View>

对此：

<View style={styles.Warning}>
  <Text>
  </Text>
  <Text>
  </Text>
  <Text>
  </Text>
  <Text>
  </Text>
  <Text>
  </Text>
</View>

样式为：

const styles = StyleSheet.create({
  Warning:{
    color:'#a94442'
  }
});

（如果我不用安装任何东西就更好了） 谢谢你。

Answer 1

是的，您绝对可以做您想做的事情。您唯一缺少的部分是在

Text

容器内放置

View

容器。

示例：

<View>
 <Text style={{color:'red'}}>
   <Text>
     text1 // will inherit red color
   </Text>
   <Text>
     text2 // will inherit red color
   </Text>
 </Text>
</View>

欲了解更多信息，您还可以查看链接 https://facebook.github.io/react-native/docs/text.html#containers

Answer 2

你不能。颜色只是另一种字体样式，此限制在文档

中进行了描述

您还无法为整个子树设置默认字体。同时，fontFamily只接受单个字体名称，这与CSS中的font-family不同。在应用程序中使用一致的字体和大小的推荐方法是创建一个组件 MyAppText

所以基本上它说，将文本包装在“StyledText”之类的内容中并使用它。因此，您应该为您想要使用的所有样式构建一个样式库。作为

LightBold

文本的示例：

import { StyleSheet, Text } from "react-native";

const styles = StyleSheet.create({
  fontLight: {
    color: '#fff',
    fontWeight: 'bold'
  }
};

function LightBoldText({children}) {
  return <Text style={styles.fontLight}>{children}</Text>
}

// then you'll use it as any component
function MyComponent() {
  return <LightBoldText>Some Text</LightBoldText>
}