kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 03:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modal Animation Types

Browse Source 
Summary:
Currently the Modal component uses the slide up / down animation for presenting and hiding the Modal with no options. This PR gives users a choice to use a fade in / out animation or the current slide animation (slide is the default). Android and iOS.

![](http://g.recordit.co/nfJSg487Ox.gif)  ![](http://g.recordit.co/QHGDuUFbPy.gif)

I've updated the UIExplorer and documentation.

![image](https://cloud.githubusercontent.com/assets/4265163/14743130/0bd8282c-086e-11e6-93eb-3d344431337d.png)

Thanks!
Closes https://github.com/facebook/react-native/pull/7156

Differential Revision: D3237809

Pulled By: javache

fb-gh-sync-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
fbshipit-source-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
This commit is contained in:
Jesse Sessler
2016-04-28 15:59:11 -07:00
committed by Facebook Github Bot 1
parent b5f14ea8f1
commit 2bb1c263db
10 changed files with 88 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java
View File

@@ -55,9 +55,9 @@ public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView>
view.dismiss();
}
@ReactProp(name = "animated")
public void setAnimated(ReactModalHostView view, boolean animated) {
view.setAnimated(animated);
@ReactProp(name = "animationType")
public void setAnimationType(ReactModalHostView view, String animationType) {
view.setAnimationType(animationType);
}
@ReactProp(name = "transparent")

12
ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java
View File

@@ -56,7 +56,7 @@ public class ReactModalHostView extends ViewGroup {
private DialogRootViewGroup mHostView;
private @Nullable Dialog mDialog;
private boolean mTransparent;
private boolean mAnimated;
private String mAnimationType;
// Set this flag to true if changing a particular property on the view requires a new Dialog to
// be created. For instance, animation does since it affects Dialog creation through the theme
// but transparency does not since we can access the window to update the property.
@@ -131,8 +131,8 @@ public class ReactModalHostView extends ViewGroup {
mTransparent = transparent;
}
protected void setAnimated(boolean animated) {
mAnimated = animated;
protected void setAnimationType(String animationType) {
mAnimationType = animationType;
mPropertyRequiresNewDialog = true;
}
@@ -162,8 +162,10 @@ public class ReactModalHostView extends ViewGroup {
// Reset the flag since we are going to create a new dialog
mPropertyRequiresNewDialog = false;
int theme = R.style.Theme_FullScreenDialog;
if (mAnimated) {
theme = R.style.Theme_FullScreenDialogAnimated;
if (mAnimationType.equals("fade")) {
theme = R.style.Theme_FullScreenDialogAnimatedFade;
} else if (mAnimationType.equals("slide")) {
theme = R.style.Theme_FullScreenDialogAnimatedSlide;
}
mDialog = new Dialog(getContext(), theme);

7
ReactAndroid/src/main/res/views/modal/anim/fade_in.xml Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_shortAnimTime"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0.0"
android:toAlpha="1.0"
/>

7
ReactAndroid/src/main/res/views/modal/anim/fade_out.xml Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_shortAnimTime"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
/>

17
ReactAndroid/src/main/res/views/modal/values/themes.xml
View File

@@ -8,13 +8,24 @@
<item name="android:windowBackground">@android:color/transparent</item>
</style>
<style name="Theme.FullScreenDialogAnimated" parent="Theme.FullScreenDialog">
<item name="android:windowAnimationStyle">@style/DialogAnimation</item>
<style name="Theme.FullScreenDialogAnimatedSlide" parent="Theme.FullScreenDialog">
<item name="android:windowAnimationStyle">@style/DialogAnimationSlide</item>
</style>
<style name="DialogAnimation">
<style name="Theme.FullScreenDialogAnimatedFade" parent="Theme.FullScreenDialog">
<item name="android:windowAnimationStyle">@style/DialogAnimationFade</item>
</style>
<style name="DialogAnimationSlide">
<item name="android:windowEnterAnimation">@anim/slide_up</item>
<item name="android:windowExitAnimation">@anim/slide_down</item>
</style>
<style name="DialogAnimationFade">
<item name="android:windowEnterAnimation">@anim/fade_in</item>
<item name="android:windowExitAnimation">@anim/fade_out</item>
</style>
</resources>