如何使视图元素的所有文本子项具有相同的样式

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