On iOS, orientation changes don't animate in a way that "looks native"
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Yarn: 1.0.1
npm: 5.4.1
Watchman: 4.5.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.3934792
Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: 0.48.3 => 0.48.3
Steps to Reproduce
- Create a react native app w/ react native init
- Run it on an iOS device or the iOS simulator
- (If on a simulator) Turn on slow animations (CMD+T) so the issue will be more obvious.
- Rotate the device a few times to landscape and portrait
- Observe that immediately after the orientation changes, the view is resized to the dimensions of the new orientation, and THEN the rotation animation begins. The view's contents and dimensions are not smoothly resized while the view is being rotated.
Expected Behavior
In a regular native iOS app, when the orientation of the device changes, the view's contents and dimensions smoothly resize while the view is also rotated at the same time.
Here is a animated gif. This is a simple native app written in swift, see how the view resizes and rotates smoothly (at the same time) on orientation changes:

Actual Behavior
On orientation changes, the view's dimensions and contents are resized once at the very beginning of the change, and then the rotation animation happens.
Here is another animated git. This is a simple RN app, with a red border applied to the view so you can see how the view's dimensions are immediately changed (not smoothly animated).

Reproducible Demo
Sadly I can't seem to get the expo app to handle rotations so I guess having a Snack wouldn't be useful.
But you can see if yourself pretty easily if you:
- Use
react-native initto create a new app - Edit
index.ios.jsand add to the container's styles (line ~40):
borderColor: 'red',
borderWidth: 10,
- Then run it, turn on slow animations in the simulator (CMD+T), and change the orientation a few times.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riproduci il comportamento in un’app React Native usando index.ios.js, aggiungendo gli stili del bordo descritti intorno alla riga 40 e abilitando le animazioni lente del simulatore. Poi traccia la gestione coinvolta nel cambio di orientamento di iOS. Il lavoro è completato quando il contenuto e le dimensioni della vista si ridimensionano fluidamente durante la rotazione, in modo corrispondente al comportamento nativo di iOS.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- ios, react-native
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100