zIndex in a List
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
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
- Make a list (FlatList or Array.map, it happens with both)
- The renderItem should get an onPress event
- 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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从链接的 rn branch demo project 开始,使用 FlatList 和 Array.map 重现该问题,然后检查被按下组件的位置和 zIndex 是如何处理的。比较其在报告中的 React Native 设置下的行为;当具有较高 zIndex 的被按下组件渲染在其他列表组件之上时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native
- 领域
- mobile-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100