react / react/react-native

On iOS, orientation changes don't animate in a way that "looks native"

Offen
#16,060 29 Kommentare 33 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

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
  1. Create a react native app w/ react native init
  2. Run it on an iOS device or the iOS simulator
  3. (If on a simulator) Turn on slow animations (CMD+T) so the issue will be more obvious.
  4. Rotate the device a few times to landscape and portrait
  5. 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:

native_rotation

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).

rn_rotation

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:

  1. Use react-native init to create a new app
  2. Edit index.ios.js and add to the container's styles (line ~40):
    borderColor: 'red',
    borderWidth: 10,
  1. Then run it, turn on slow animations in the simulator (CMD+T), and change the orientation a few times.

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

Reproduziere das Verhalten in einer React-Native-App mit index.ios.js, füge die um Zeile 40 beschriebenen Rahmenstile hinzu und aktiviere langsame Simulator-Animationen. Verfolge anschließend die beteiligte Behandlung von iOS-Änderungen der Geräteausrichtung. Als abgeschlossen gilt es, wenn sich die Inhalte und Abmessungen der Ansicht während der Drehung fließend anpassen und dem nativen iOS-Verhalten entsprechen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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