2016-08-29 3 views
1

親コンテナの子ビューが反応ネイティブで2つ重なっているかどうかを確認する方法はありますか?反応ネイティブで2つのビューが重複していないか確認する

非常に頻繁にやりたいと思っていたので、私はストレスの多い操作(つまり、すべてのビューを測定するなど)でないといいかもしれません。

アイデアは大変ありがとうございます。 :)

編集: 私の質問は本当に一般的なので、私はそれをもう少し明確にするようにします。

私が達成したいのは、再レンダリング時の位置を変更できる2つのビュー間の衝突を検出するためのウォッチャー機能です。特定のイベントに位置を変更することができる2つのビュー上の画像で Scenario

、そして私は、これら2つのためのコールバックを必要とする:

例:(Iが低すぎるの担当者に画像を埋め込むことはできません申し訳ありませんが)オーバーラップ

答えて

1

これは非常に一般的な質問ですが...しかし、私はいくつかのヒントを持っています。あなたはその次の理由のビューでコンポーネントを見ることができない通常時に:

  • あなたは、このような表示などのUIコンポーネントを使用している場合は、「絶対」位置の画像は、あなたがその財産をキャンセルしているかどうかを確認を確認してくださいそのレンダリング。
  • 何らかの理由でレンダリングできない大きなコンポーネントがあれば、より簡単なコンポーネントで置き換えてレンダリングが行われるようにして、問題がビューにあり、純粋なコードではないことを確認できます。私は通常、ちょうどそのようなエラーをテストするために、いくつかのジブリズムを含むテキストコンポーネントを配置します。
  • コンポーネントは、1つの内部フレキシボックス/である場合 - 時には、以下の組み合わせを追加することができます:

    flex: 1 justifyContent: 'center', alignItems, 'center', flexDirection: 'row'

  • 私はそれを説明することはできませんが、私はflex: 1を削除出現数を持っていましたそれを確認したことを確認してください。

  • 複雑な内部ループ内の項目を実際に返すようにしてください。例えば:

WRONG:

myList.map((item) => { return <View>{item}</View> })

CORRECT:

またreturn myList.map((item) => { return <View>{item}</View> })

  • あなたがホットリロード&リモートデバッグ(手ぶれデバイス)を有効にしてください - 非常に便利で、5倍の速度でコードを作成できます
+0

ご回答いただきありがとうございますが、私の質問は実際にはスタイリングに関するものではありませんでした。問題のより良い説明については私の編集をご覧ください。 – Frnas

関連する問題