原産国：外部スタイルとインラインスタイルを組み合わせる方法は？

これは_renderRow関数の一部です。私は、ボタンのためのいくつかの基本的なスタイルと、行の変数から読み込まれるスタイルを持っています。この例では '＃f00'ですが、thisColorのように変数にすることができます。外部スタイルとインラインスタイルを組み合わせるにはどうすればよいですか？原産国：外部スタイルとインラインスタイルを組み合わせる方法は？

このような何かをするが、これは動作しません：

<TouchableHighlight style={[styles.button]{ backgroundColor: '#f00'}}

または私はTouchableHightlight容器内部に巣にそれを持っているし、代わりにその要素にインラインスタイルを置けばいいの？

<TouchableHighlight style={{ ...styles.button, backgroundColor: '#f00'}}

出典

2016-10-18 Niclas

あなたのブラケットが間違っている：

出典

2016-10-18 20:51:36

は、スプレッドの構文を使用できます。あなたは配列の構文を引き続き使用する予定の場合は、代わりにこれを使用します。

<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}

出典

2016-10-18 20:40:37

おかげで、これは素晴らしい選択肢です。私はスタイルのためのドキュメントの普及した構文をそれほど見ていないので、私は他の答えを受け入れるために行くつもりですが、両方とも素晴らしいです！ – Niclas

しかし、その答えは正しくない、IMO、あなたはそれをテストしましたか？単一の結合されたスタイルオブジェクトではなく、スタイルオブジェクトの配列を渡しています。 –

@Niclasもし 'styles.button'が有効なrectスタイルのオブジェクトであれば[spread syntax]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator）は間違いありません行く道。 – Ted

をこれはでテスト正しい答えは、ネイティブ0.44.2を反応させるのである。

<TouchableHighlight style={{...styles.button, ...{backgroundColor: '#f00'}}}>

出典

2017-10-05 15:06:24

OPを手伝ってくれてありがとう、あなたの答えを見る他の人に役立つかもしれない公式のドキュメンテーションを追加してください。 – dubes

私は以前のコメントでいくつかのテストをして自分自身をテストしました、そして私はそれを働かせました;）それはokではない公式のドキュメント... –

原産国：外部スタイルとインラインスタイルを組み合わせる方法は？

答えて

関連する問題