2017-07-12 7 views
0

次の図のようなビューを作成したいとします。回避策はありますか?背景画像として写真を作成して使用すること以上のもの。 http://i68.tinypic.com/2w6z4o1.jpg直線を使わずに2つのビューを分割する方法は?

+0

あなたはちょうどそのよう2色の画面を作成するために探しているか、各色のブロックは、別のビューとして機能する必要がありますか?私は反応ネイティブリニアグラデーションは、そのようなビューに2つの色を適用できますが、別々のビューとして機能しないと思います。https://github.com/react-native-community/react-native-linear-gradient –

+0

いいえ実際に私はそれらを両方とも機能的にしたい。 @GarrettMcCullough – Bat

+0

あなたはネイティブ環境(iOSまたはAndroid)でどうやってやりますか? – vovkasm

答えて

2

ここで達成するには、2つの別々の効果があります。

  1. 背景勾配 - ちょうど直線勾配を想定し、これを使用は可能です:react-native-linear-gradient
  2. は非水平線。これを実現するには、Viewの回転変換を使用し、内側のビューで逆変換を実行します。あなたはそれが兄弟の上に座るように正しく注文する必要があります(最後の要素は前のものよりも高い)。例えば。

<View style={{transform: [{rotate: rotation}]}}> <View style={{transform: [{rotate: -rotation}]}}> {children} </View> </View>

関連する問題