web-dev-qa-db-ja.com

反応ネイティブでスタイルをカスケードする最も簡単な方法

たとえば、fontFamilyにViewを設定すると、react Nativeで、内部要素がプロパティを継承しないことがわかります。反応ネイティブスタイリングで利用可能なカスケードコンセプトはありますか？どうすればそれを達成できますか？

react-nativestylescascade
9
R01010010

スタイルプロップの繰り返しを避けるために私が見つけた最も簡単な方法は、コンポーネントにカプセル化することです。例えば：

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>
4
Dale Anderson

どうやら現時点では、コンポーネントは、親が同じタイプであるか、少なくとも継承するプロパティをサポートしている場合にのみ、親のプロパティを継承できます。私はメインのViewコンポーネントでfontFamilyを設定していましたが、Textの子には継承されていませんでした。

3
R01010010

スタイルオブジェクトを抽出することで、このようなことを実現しました。以下の例。

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