react / react/react-native

Android native UI components are not re-layout on dynamically added views

オープン
#17,968 コメント 50 件 リアクション 59 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Bug Issue: Author Provided Repro Never gets stale Platform: Android Ran Commands Resolution: Backlog
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.9.4
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Description

The issue can be noticed if you bridge to React Native the following views:

A view with elements that have a visibility to gone on the initial render won't be displayed after you've set is visibility to visible. view.isShown() will return true, but it will not be there or it will be there but not really re-layout.

A view with elements that are dynamically added, simply by view.addView() or let's say you want to load an image with Fresco it will only work if it was loaded on the initial render.

I've noticed that native components are re-layout on hot reloading, but this.forceUpdate() or changing props won't trigger a re-layout. As an ugly workaround, if we interact with the native component height or width it will trigger a re-layout, so every time you want to toggle a visibility from gone to visible or dynamically adds views you can alter his size.

I've also implemented needsCustomLayoutForChildren without notable change.

Expected Behavior (Native)

Here's the native implementation directly inflated inside an Activity.

Actual Behavior (React Native)

Here's the exact same layout as above, but bridged to react native and inflated inside SimpleViewManager.

Reproducible Demo

https://github.com/charpeni/react-native-android-visibility-issue

Related to #5531 (Already flagged in RN 0.18).

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

再現可能なデモと、SimpleViewManager を通じて inflated されたネイティブコンポーネントから始めます。表示状態のケースと動的に追加されたビューのケースを再現し、続いて React Native Android のレイアウト更新が直接の Activity 実装とどのように異なるかを、報告されている needsCustomLayoutForChildren の試行も含めて調査します。動的に表示された、または追加されたネイティブビューが幅や高さを変更せずにレイアウトされ、デモの動作が検証されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
android, react-native
領域
mobile-dev
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。