react / react/react-native

zIndex in a List

Offen
#18,616 30 Kommentare 18 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bug Component: FlatList Help Wanted :octocat: Issue: Author Provided Repro
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

This is actually a reopen of my #16878 issue. I've got some thumbs up, so I think I am not the only one with this issue. This time I updated my example project to a pure rn project with the latest release (rn Branche)

Environment

info
  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
      Memory: 94.53 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
      Yarn: 1.16.0 - ~/.nvm/versions/node/v10.12.0/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23
        Build Tools: 23.0.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Steps to Reproduce

  1. Make a list (FlatList or Array.map, it happens with both)
  2. The renderItem should get an onPress event
  3. The onPress event changes the style to a high zIndex and position absolute

Expected Behavior

I expect that the component with the high zIndex is over every other component.

Actual Behavior

It seems like it ignores the zIndex property. The behavior is exactly like I would not apply any zIndex. I can remove the zIndex and I get the same result.
Google Drive Link to a screenshot.

Reproducible Demo

Github Demo Project rn Branche This is just an extract out of my current rn project.
Expo Link (Not on the latest rn version)
Google Drive Video which show the issue

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem verlinkten rn branch demo project und reproduziere das Problem mit FlatList und Array.map. Untersuche anschließend, wie die Position und zIndex der gedrückten Komponente behandelt werden. Vergleiche das Verhalten mit dem gemeldeten React Native-Setup; abgeschlossen ist die Aufgabe, wenn die gedrückte Komponente mit einem hohen zIndex über den anderen List components gerendert wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile-dev
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.