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

Question

fontFamilyをたとえばViewに設定すると反応ネイティブで、内部要素はプロパティを継承しません。それは反応ネイティブのスタイリングで利用可能なカスケードの概念ですか？私はそれをどのように達成するのですか？

Answer 1

スタイルを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

Answer 2

を示すために作成した例である例であり、親コンポーネントは、それが子供たちにスタイルだカスケードます。だから、すべてのテキストは、ここに赤いフォントになります。

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

Answer 3

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

Answer 4

スタイル小道の繰り返しを避けるための最も簡単な方法は、コンポーネントにカプセル化することです。 - https://facebook.github.io/react-native/docs/style.htmlあなたはスタイルプロパティを使用している場合、あなたはここでそれについての詳細を読むことができますあなたのためのサブコンポーネントへ

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>