diff --git a/docs/api/hippy-react/components.md b/docs/api/hippy-react/components.md index 5a4954c9641..a7985c317cd 100644 --- a/docs/api/hippy-react/components.md +++ b/docs/api/hippy-react/components.md @@ -182,7 +182,7 @@ import icon from './qb_icon_new.png'; | autoHideStatusBar | 是否在`Modal`显示时自动隐藏状态栏。Android 中仅 api28 以上生效。 `default: false` | `boolean` | `Android` | | autoHideNavigationBar | 是否在`Modal`显示时自动隐藏导航栏。 `default: false` | `boolean` | `Android` | | onShow | 在`Modal`显示时会执行此回调函数。 | `Function` | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` | -| onOrientationChange | 屏幕旋转方向改变时执行会回调 | `Function` | `Android、iOS` | +| onOrientationChange | 屏幕旋转方向改变时执行会回调,返回当前屏幕显示方向 `{ orientation: portrait|landscape }` | `Function` | `Android、iOS` | | onRequestClose | 在 `Modal` 请求关闭时会执行此回调函数,一般时在 Android 系统里按下硬件返回按钮时触发,一般要在里面处理关闭弹窗。 | `Function` | `Android、hippy-react-web、Voltron` | | transparent | 背景是否是透明的。`default: true` | `boolean` | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` | | visible | 是否显示。`default: true` | `boolean` | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` | diff --git a/driver/js/examples/hippy-react-demo/src/components/Modal/index.jsx b/driver/js/examples/hippy-react-demo/src/components/Modal/index.jsx index 5bf6a3fb443..7b2f772c5d3 100644 --- a/driver/js/examples/hippy-react-demo/src/components/Modal/index.jsx +++ b/driver/js/examples/hippy-react-demo/src/components/Modal/index.jsx @@ -154,7 +154,8 @@ export default class ModalExpo extends React.Component { transparent={true} animationType={this.state.animationType} visible={visible} - onRequestClose={() => { /* Trigger when hardware back pressed */ }} + requestClose={() => { /* Trigger when hardware back pressed */ }} + orientationChange={(evt) => { console.log('orientation changed', evt.orientation); }} supportedOrientations={['portrait']} immersionStatusBar={this.state.immerseStatusBar} autoHideStatusBar={this.state.hideStatusBar} diff --git a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-dialog.vue b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-dialog.vue index 62861904c5e..864c1edee6a 100644 --- a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-dialog.vue +++ b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-dialog.vue @@ -51,6 +51,7 @@ :autoHideNavigationBar="autoHideNavigationBar" @show="onShow" @requestClose="onClose" + @orientationChange="onOrientationChange" >
@@ -80,6 +81,7 @@ :autoHideStatusBar="autoHideStatusBar" :autoHideNavigationBar="autoHideNavigationBar" @requestClose="onClose" + @orientationChange="onOrientationChange" >
@@ -78,6 +79,7 @@ :animationType="dialogAnimationType" :transparent="true" @requestClose="onClose" + @orientationChange="onOrientationChange" >
{ console.log('Dialog is opening'); }; - + const onOrientationChange = (evt) => { + console.log('orientation changed', evt.nativeParams); + }; const onClose = (evt) => { evt.stopPropagation(); /** diff --git a/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalDialogView.java b/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalDialogView.java new file mode 100644 index 00000000000..75aeb646bca --- /dev/null +++ b/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalDialogView.java @@ -0,0 +1,98 @@ +/* Tencent is pleased to support the open source community by making Hippy available. + * Copyright (C) 2018 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package com.tencent.mtt.hippy.views.modal; + +import static android.content.res.Configuration.ORIENTATION_LANDSCAPE; +import static android.content.res.Configuration.ORIENTATION_PORTRAIT; +import static android.content.res.Configuration.ORIENTATION_UNDEFINED; +import static com.tencent.renderer.utils.EventUtils.EVENT_ORIENTATION_CHANGED; + +import android.app.Dialog; +import android.content.ComponentCallbacks; +import android.content.Context; +import android.content.res.Configuration; +import android.os.Bundle; +import android.view.View; +import androidx.annotation.NonNull; +import com.tencent.renderer.utils.EventUtils; +import java.lang.ref.WeakReference; +import java.util.HashMap; + +public class HippyModalDialogView extends Dialog { + private int mOrientation = ORIENTATION_UNDEFINED; + private final ConfigurationChangedListener mListener = new ConfigurationChangedListener();; + private final WeakReference mHostView; + + public HippyModalDialogView(@NonNull Context context, int themeResId, @NonNull View hostView) { + super(context, themeResId); + mHostView = new WeakReference<>(hostView); + } + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + Configuration configuration = getContext().getResources().getConfiguration(); + mOrientation = configuration.orientation; + } + + @Override + protected void onStart() { + super.onStart(); + getContext().registerComponentCallbacks(mListener); + } + + @Override + protected void onStop() { + super.onStop(); + getContext().unregisterComponentCallbacks(mListener); + } + + protected void sendOrientationChangeEvent(int orientation) { + final View hostView = mHostView.get(); + if (hostView != null) { + String value; + switch (orientation) { + case ORIENTATION_PORTRAIT: + value = "portrait"; + break; + case ORIENTATION_LANDSCAPE: + value = "landscape"; + break; + default: + value = ""; + } + HashMap params = new HashMap<>(); + params.put("orientation", value); + EventUtils.sendComponentEvent(hostView, EVENT_ORIENTATION_CHANGED, params); + } + } + + private class ConfigurationChangedListener implements ComponentCallbacks { + @Override + public void onConfigurationChanged(Configuration newConfig) { + if (newConfig.orientation != mOrientation) { + sendOrientationChangeEvent(newConfig.orientation); + mOrientation = newConfig.orientation; + } + } + + @Override + public void onLowMemory() { + // Handle low memory event + } + } +} diff --git a/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalHostView.java b/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalHostView.java index e7bb9ef9975..de6e82e72f9 100644 --- a/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalHostView.java +++ b/renderer/native/android/src/main/java/com/tencent/mtt/hippy/views/modal/HippyModalHostView.java @@ -70,7 +70,7 @@ public enum AnimationStyleTheme { @NonNull private final DialogRootView mDialogRootView; @Nullable - private Dialog mDialog; + private HippyModalDialogView mDialog; @Nullable private View mContentView; @Nullable @@ -356,9 +356,9 @@ protected void showOrUpdate() { } @NonNull - protected Dialog createDialog(@NonNull Context context) { + protected HippyModalDialogView createDialog(@NonNull Context context) { int themeResId = android.R.style.Theme_Translucent_NoTitleBar; - return new Dialog(context, themeResId); + return new HippyModalDialogView(context, themeResId, this); } @NonNull diff --git a/renderer/native/android/src/main/java/com/tencent/renderer/utils/EventUtils.java b/renderer/native/android/src/main/java/com/tencent/renderer/utils/EventUtils.java index a6da91aac85..4b2ff6ee965 100644 --- a/renderer/native/android/src/main/java/com/tencent/renderer/utils/EventUtils.java +++ b/renderer/native/android/src/main/java/com/tencent/renderer/utils/EventUtils.java @@ -77,6 +77,8 @@ public class EventUtils { public static final String EVENT_MODAL_REQUEST_CLOSE = "requestClose"; // On modal view show. public static final String EVENT_MODAL_SHOW = "show"; + // On modal orientation changed. + public static final String EVENT_ORIENTATION_CHANGED = "orientationChange"; // On refresh wrapper view refresh. public static final String EVENT_REFRESH_WRAPPER_REFRESH = "refresh";