React native 在react native中级联样式的最简单方法

我看到，在react native中，如果我在视图中设置

fontFamily

，例如

视图中，内部元素不会继承属性。react native造型中是否有级联概念？如何实现它？
将样式作为道具传递，以便在CSS中复制级联。所有子组件都可以继承
样式
道具来实现这一点。它的实现方式如下：

  const styles = StyleSheet.create({
    instructions: {
      fontSize: 16,
      textAlign: 'center',
      margin: 15,
    },
  });

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>
        <ChildComponent
          cascadingStyle={styles}
        />
      </View>
    );
  }

const styles=StyleSheet.create({
说明：{
尺寸：16，
textAlign:'中心'，
差额：15，
},
});
render（）{
返回(
);
}

这里是我创建的一个示例，用于演示
这里是一个示例，父组件将其样式级联到子组件。因此，此处所有文本均为红色字体：

  render() {
  return (
    <View style={styles.red}>
      <Text>just red</Text>
      <Text>just</Text>
      <Text>red</Text>
      <Text>red</Text>
    </View>
  );
 }
}

const styles = StyleSheet.create({
 red: {
 color: 'red',
 },
});

render（）{
返回(
只是红色
只是
红色
红色
);
}
}
const styles=StyleSheet.create({
红色：{
颜色：“红色”，
},
});
显然，此时组件只能继承父级的属性，前提是父级具有相同的类型，或者至少还支持要继承的属性。我在主
视图
组件中设置了fontFamily，而不是在
文本
子组件中继承。
我发现避免重复样式道具的最简单方法是封装在组件中。例如：

const Item = ({ text }) => <Text style={{ padding: 10 }}>{text}</Text>

const Consumer = () =>
  <View>
    <Item text="Item 1" />
    <Item text="Item 2" />
    <Item text="Item 3" />
  </View>

const Item=（{text}）=>{text}
const Consumer=（）=>
我通过提取样式对象实现了类似的功能。下面的例子

globalStyle.js

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
    myView: {
        some view styles
    },
    myText: {
        some text styles
    },
});

import {StyleSheet} from "react-native";
import globalStyle from "../globalStyle";

export default StyleSheet.create({
    ...globalStyle,
    myLocalView: {
        local view styles
    },
});

import {StyleSheet} from "react-native";
import {myText} from "../globalStyle";

export default StyleSheet.create({
    myLocalText: {
        ...myText,
        local text styles
    },
});

localStyle.js

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
    myView: {
        some view styles
    },
    myText: {
        some text styles
    },
});

import {StyleSheet} from "react-native";
import globalStyle from "../globalStyle";

export default StyleSheet.create({
    ...globalStyle,
    myLocalView: {
        local view styles
    },
});

import {StyleSheet} from "react-native";
import {myText} from "../globalStyle";

export default StyleSheet.create({
    myLocalText: {
        ...myText,
        local text styles
    },
});

另一个localstyle.js

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
    myView: {
        some view styles
    },
    myText: {
        some text styles
    },
});

import {StyleSheet} from "react-native";
import globalStyle from "../globalStyle";

export default StyleSheet.create({
    ...globalStyle,
    myLocalView: {
        local view styles
    },
});

import {StyleSheet} from "react-native";
import {myText} from "../globalStyle";

export default StyleSheet.create({
    myLocalText: {
        ...myText,
        local text styles
    },
});

我也遇到过类似的情况，我们创建了一个StyleClass，它知道如何通过查看预定义的样式对象来设置每个元素类型和单个元素的样式

我们为所有RN基本元素创建了自定义包装器，这些元素都将调用StyleClass，StyleClass知道如何找到这些元素的基本样式以及键/id的任何唯一样式

希望这能有所帮助。
快速示例可能如下所示：

MyImage.jsx

import React from "react";
import { Image } from "react-native";
import { StylesClass } from "./StylesClass";

const styleClass = new StyleClass();

export class MyImage extends React.Component {
    render() {
        const { uniqueId, sourceUrl } = this.props;

        // finds styles by type "image" for base styles and "key" for unique styles
        let imageStyles = stylesClass.getElementStyle("image", uniqueId) || [];

        return (
            <Image
                source={{ uri: sourceUrl }}
                style={imageStyles}
            />
        );
    }
}

然后只要在需要图像的地方使用MyImage即可

不一定是层叠的，更像是按id设置css样式，但我们的案例中有需要设置样式的动态内容，我们没有真正的层叠解决方案，因此我们使用默认样式，然后按每个元素id使用唯一样式。
RN如果您使用style属性，将样式层叠到子组件中，你可以在这里了解更多-@MattAft-yep，它说“一种常见的模式是让你的组件接受一个样式道具，而这个样式道具又被用来设置子组件的样式。你可以用这个来让样式“层叠”成CSS中的样式。但我不知道这到底是什么意思。我编辑我的答案是为了向你展示…@R01010010我提交并回答了下面的问题。你是在试图避免每次都设置字体吗？如果是这样，请选中，这说明了一个小技巧-创建一个具有预定义字体样式的自定义文本组件，并在应用程序中使用它，而不是。对不起，怎么会这样？这仍然会迫使我在子组件中设置
style={this.prop.class}
？原因正是我想要避免的你为什么要避免呢？这是实现CSS中的层叠效果的最简单方法，而且非常容易利用。我希望避免在子对象中使用CSS，就像在html中使用CSS一样。我将fontFamily设置为父对象，子对象将自动继承它。更简单。这不是html@R01010010。。。这是我所说的一个例子，这与指定子组件样式没有什么不同。说明。我也从未见过“cascadingStyle=”。。。这仅仅是一个例子吗？