私は色の性質を持っていないこの</p> <pre><code><View style={[color: 'red']}> <Text>Text1</Text> <Text>Text2</Text> <Text>Text3</Text> </View> </code></pre> <p>ビューコンポーネントのようなJSXを定義している要素

Question

をテキストにスタイルネイティブに反応し、それが子要素のテキストの色の設定を適用しません。

個々の要素に同じスタイルを適用したくありません。 親のスタイルを定義し、HTMLのようにすべての子要素に適用するにはどうすればよいですか？

Answer 1

私が知る限り、スーパーコンポネットからスタイルを継承する簡単な方法はありません。

たぶんできるカスタムこのようなコンポーネント：

class YourComponent extends Component { 
    render() { 
    let children = []; 
    React.Children.forEach(this.props.children, (item, index) => { 
     // textStyle is the style that you want children to inherit 
     children.push(React.cloneElement(item, this.props.textStyle)); 
    }); 

    return (
     <View> 
     { children } 
     </View> 
    ); 
    } 
} 

Answer 2

スタイルはTextコンポーネント間を伝播されているので、あなたのような何かを行うことができます：それぞれにスタイルを適用することよりも

<Text style={{color: 'red'}}> 
    <Text>Text1</Text> 
    <Text>Text2</Text> 
    <Text>Text3</Text> 
</Text> 

Answer 3

その他要素を個別に使用すると、lodash _.mapのようなものを使用し、各子をプログラム的にレンダリングし、スタイルを一度宣言することができます。

各テキストタグに異なる色を使いたいので、これを実行しようとしましたか？

コードを少なくするには、そのコードを「構成解除」することもできます。代わりにstyles.aStyle. styles.anotherStyle...の

const { aStyle, anotherStyle, andAnotherStyle } = styles; 

。