Animated tracking using the native driver does not work as expected
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
Description
Tracking a dynamic animated value (such as scroll position) using the native driver doesn't work correctly. Instead of animating the pinned value simultaneously, the animation only starts once the dynamic value stops changing.
React Native Version
0.71.11
Output of npx react-native info
System:
OS: macOS 13.2.1
CPU: (10) arm64 Apple M1 Max
Memory: 81.73 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Watchman: 2022.11.07.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.11 => 0.71.11
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
I have created an example app that illustrates the problem.
- Clone the repository from https://github.com/kolking/animated-tracking, install and run the app in the simulator.
- When the native driver is disabled, scroll the bottom part horizontally to see how red dots follow the scroll position with a stagger effect.
- Now, in the
App.tsxchange theNATIVE_DRIVERconstant totrue, reload the app and try scrolling the bottom part again.
Snack, code example, screenshot, or link to a repository
Also please take note that when the native driver is enabled, it ignores the initial contentOffset. As a result, the red dots are initially displayed on the left and will only move to the center after a manually triggered scroll event.
useNativeDriver: false |
useNativeDriver: true |
|---|---|
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Tái hiện hành vi trong ví dụ theo dõi hoạt ảnh được liên kết, bắt đầu với App.tsx và toggle NATIVE_DRIVER. So sánh việc cuộn khi driver gốc bị tắt và được bật, bao gồm cả contentOffset ban đầu. Hoàn tất khi các chấm hoạt ảnh bám theo vị trí cuộn đang thay đổi với hiệu ứng so le và bắt đầu từ offset ban đầu khi driver gốc được bật.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100