Question

我看到，如果我在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

我已经通过提取样式对象实现了类似的目的。下面的示例。

globalStyle.js

import {StyleSheet} from 'react-native';

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

localStyle.js

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

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

anotherLocalStyle.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，该类知道如何找到该元素的基本样式以及其键/ 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}
            />
        );
    }
}

StyleClass.js （快乐路径，无null /未定义检查）

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中复制级联。所有子组件都可以继承#include <iostream> #include <cstdlib> #include <ctime> #include <cstring> using namespace std; int main(int args, char* argv[]) { int i; int result; int solution; char fact; bool done = false; int correct = 0; int count = 0; do { try { cout << "Enter (m)ultiplication or " << "(a)ddition." << endl; /*or (s)ubstraction. */ cin >> fact; while (!cin) throw fact; if (fact != 'A') if (fact != 'a') if (fact != 'M') if (fact != 'm') while (!cin) throw fact; cout << "Now, enter the number of the fact that you would like to do." << endl; cin >> i; int wrong = 0; int score = 0; int j = 0; while (!cin) throw i; switch (fact) { case 'm': case 'M': while (j < 13) { cout << "What's " << i << " x " << j << "?" << endl; cin >> result; while (!cin) throw result; solution = i * j; if (result == solution) { cout << "Great Job! That is the correct answer for the problem " << i << " x " << j << "." << endl; cout << endl; cout << endl; cout << endl; score++; j++; cout << endl; } if (result != solution) { cout << "Oh no! " << result << " is NOT the correct answer for " << i << " x " << j << "." << endl; wrong = wrong + 1; count++; } if (count == 3) { cout << "The correct answer is " << i * j << "." << endl; j++; wrong = wrong - 3; count = 0; } if (count == 1) { cout << endl; count--; wrong = wrong - 1; } if (count == 2) { cout << endl; count--; wrong = wrong - 2; } } case 'a': case 'A': while (j < 13) { cout << "What's " << i << " + " << j << "?" << endl; cin >> result; while (!cin) throw result; solution = i + j; if (result == solution) { cout << "Great Job! That is the correct answer for the problem " << i << " + " << j << "." << endl; cout << endl; cout << endl; cout << endl; score++; j++; cout << endl; } if (result != solution) { cout << "Oh no! " << result << " is NOT the correct answer for " << i << " + " << j << "." << endl; wrong = wrong + 1; count++; } if (count == 3) { cout << "The correct answer is " << i + j << "." << endl; j++; wrong = wrong - 3; count = 0; } if (count == 1) { cout << endl; count--; wrong = wrong - 1; } if (count == 2) { cout << endl; count--; wrong = wrong - 2; } } if (j == 13) { system("pause"); correct = score - wrong; score = (correct * 100) / 13; } if (score >= 80) { cout << "Excellent!!!!!" << endl; cout << "You scored " << score << "%." << endl; cout << "You got " << correct << " out of 13 correct." << endl; cout << "Keep up the good work." << endl; } else if (score >= 70) { cout << "Congratulations!!!!!" << endl cout << "You scored " << score << "%." << endl; cout << "You got " << correct << " out of 13 correct." << endl; cout << "Let's see if we can score even higher next time." << endl; } else { cout << "You scored below 70 which means that you may need some" << " more practice." << endl; cout << "You scored " << score << "%." << endl; cout << "You got " << correct << " out of 13 correct." << endl; cout << "You might want to try the " << i << " facts again." << " Goodluck!!!!!" << endl; } } } catch (char fact) { cout << "Invalid input. You can only enter (m)ultiplication or" << " (a)ddition. Please try again." << endl; cin.clear(); cin.ignore(100, '\n'); } catch (int i) { cout << "Invalid input0. You can only enter a number here. Please try again." << endl; cin.clear(); cin.ignore(100, '\n'); } catch (...) { cout << "Invalid input2. You can only enter a number here. Please try again." << endl; cin.clear(); cin.ignore(100, '\n'); } } while (!done); return 0; }道具来实现此目的。它将完成如下：

style

以下是我为展示rnplay.org/apps/dErxuQ

而创建的示例

Answer 6

这是一个例子，父组件将它的样式级联到子项。因此，所有文本都将是红色字体：

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

反应原生的级联样式的最简单方法

6 个答案: