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

Question

我看到在 react native 中，如果我在 a 中设置一个fontFamily，例如，一个View，内部元素不会继承它的属性。在反应原生样式中是否有可用的级联概念？我该如何完成它？

Answer 1

我发现避免重复样式道具的最简单方法是封装在组件中。例如：

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>

Answer 2

我通过提取样式对象实现了这样的目标。下面是示例。

全球风格.js

import {StyleSheet} from 'react-native';
export default StyleSheet.create({
myView: {
some view styles
},
myText: {
some text styles
},
});

本地风格.js

import {StyleSheet} from "react-native";
import globalStyle from "../globalStyle";
export default StyleSheet.create({
...globalStyle,
myLocalView: {
local view styles
},
});

另一个本地风格.js

import {StyleSheet} from "react-native";
import {myText} from "../globalStyle";
export default StyleSheet.create({
myLocalText: {
...myText,
local text styles
},
});

Answer 3

显然，此时组件只能继承父项的属性，前提是父项属于同一类型，或者至少还支持要继承的属性。我在主View组件中设置了 fontFamily，并且在Text子组件中没有被继承。

Answer 4

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

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

希望这在某种程度上有所帮助。 快速示例可能如下所示：

我的图片.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}
/>
);
}
}

样式类.js(快乐路径没有空/未定义的检查)

const styles = {
image: {
// default imagestyles here
},
...
};
const uniqueStyles = {
image: {
someUniqueId: {
// unique styles for "someUniqueId" here
},
},
};
export class StyleClass {
getElementStyle = (elementType, id) => {
return [ ...styles[elementType], ...uniqueStyles[elementType][id] ];
}
}

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

不一定是级联的，更像是按 id 的 css 样式，但我们的情况有需要样式化的动态内容，我们并没有真正的级联解决方案，所以我们使用默认样式，然后是每个元素 ID 的独特样式。

Answer 5

将样式作为道具传递以复制 CSS 中的级联。所有子组件都可以继承一个style道具来实现这一点。它将像这样完成：

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

这是我创建的示例来演示 rnplay.org/apps/dErxuQ