react / react/react-native

Transform rotate style property doesn't work properly on ios

Đang mở
#30,523 3 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Issue: Author Provided Repro Platform: iOS
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

I use @react-native-community/slider and I needed to rotate the slider.

To do so I used the css property transform, and rotate. It works well on android, but not on ios.
The slider stay to it's original position.
When I change the rotate value while I'm visualizing the slider, it rotates after the automatic assets refresh. But when I leave the screen and go back to it, the slider isn't rotated anymore.

React Native Version

0.63.4, (also experienced this behavior on 0.63.3).

Infos :

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 60.75 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.19.0 - /var/folders/m1/qrp6lm356p5_802qt9vkc9tc0000gn/T/yarn--1606988176529-0.7023249601521031/node
Yarn: 1.22.10 - /var/folders/m1/qrp6lm356p5_802qt9vkc9tc0000gn/T/yarn--1606988176529-0.7023249601521031/yarn
npm: 6.14.8 - /usr/local/bin/npm
Watchman: 20200920.192359.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
Android SDK:
API Levels: 29, 30
Build Tools: 29.0.2, 30.0.2
System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6858069
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Java: javac 15 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Rotate an element with transform rotate style properties.

Expected result

The rotation is working on both android and ios.

Snack, code example, screenshot, or link to a repository:

The slider :
<Slider style={styles.fontSizeSlider} minimumValue={20} maximumValue={50} minimumTrackTintColor="#FFFFFF" maximumTrackTintColor="#000000" thumbTintColor="#FFFFFF" onValueChange={handleValueChange} value={textSize} />

Associated style :
fontSizeSlider: { flexBasis: '30%', width: 200, height: 40, transform: [{ rotate: '-90deg' }], },

The slider is under a flex container wich has the following css attributes :

inputContainer: { top: '50%', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', },

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Không có tệp repository hoặc test nào được nêu tên. Hãy bắt đầu bằng cách tái hiện ví dụ Slider được cung cấp với phép biến đổi -90deg trên iOS và so sánh với Android, sau đó truy vết cách React Native xử lý transform-style trên iOS; hoàn tất khi slider vẫn được xoay sau khi điều hướng và làm mới, với phạm vi kiểm thử hồi quy.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
ios, react-native
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
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.