React Native Modal 的封装与使用实例详解_React_

public class FullScreenDialog extends Dialog { private boolean isDarkMode; private View rootView; public void setDarkMode(boolean isDarkMode) { this.isDarkMode = isDarkMode; } public FullScreenDialog(@NonNull Context context, @StyleRes int themeResId) { super(context, themeResId); } @Override public void setContentView(@NonNull View view) { super.setContentView(view); this.rootView = view; } @Override public void show() { super.show(); StatusBarUtil.setTransparent(getWindow()); if (isDarkMode) { StatusBarUtil.setDarkMode(getWindow()); } else { StatusBarUtil.setLightMode(getWindow()); } AndroidBug5497Workaround.assistView(rootView, getWindow()); } }

/** * 使状态栏透明，并且是从状态栏处开始布局 */ @TargetApi(Build.VERSION_CODES.KITKAT) private static void transparentStatusBar(Window window) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { View decorView = window.getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE; decorView.setSystemUiVisibility(option); window.setStatusBarColor(Color.TRANSPARENT); } else { window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); } }

public class FullScreenModalManager extends ViewGroupManager { @Override public String getName() { return "RCTFullScreenModalHostView"; } public enum Events { ON_SHOW("onFullScreenShow"), ON_REQUEST_CLOSE("onFullScreenRequstClose"); private final String mName; Events(final String name) { mName = name; } @Override public String toString() { return mName; } } @Override @Nullable public Map getExportedCustomDirectEventTypeConstants() { MapBuilder.Builder builder = MapBuilder.builder(); for (Events event : Events.values()) { builder.put(event.toString(), MapBuilder.of("registrationName", event.toString())); } return builder.build(); } @Override protected FullScreenModalView createViewInstance(ThemedReactContext reactContext) { final FullScreenModalView view = new FullScreenModalView(reactContext); final RCTEventEmitter mEventEmitter = reactContext.getJSModule(RCTEventEmitter.class); view.setOnRequestCloseListener(new FullScreenModalView.OnRequestCloseListener() { @Override public void onRequestClose(DialogInterface dialog) { mEventEmitter.receiveEvent(view.getId(), Events.ON_REQUEST_CLOSE.toString(), null); } }); view.setOnShowListener(new DialogInterface.OnShowListener() { @Override public void onShow(DialogInterface dialog) { mEventEmitter.receiveEvent(view.getId(), Events.ON_SHOW.toString(), null); } }); return view; } @Override public LayoutShadowNode createShadowNodeInstance() { return new FullScreenModalHostShadowNode(); } @Override public Class getShadowNodeClass() { return FullScreenModalHostShadowNode.class; } @Override public void onDropViewInstance(FullScreenModalView view) { super.onDropViewInstance(view); view.onDropInstance(); } @ReactProp(name = "autoKeyboard") public void setAutoKeyboard(FullScreenModalView view, boolean autoKeyboard) { view.setAutoKeyboard(autoKeyboard); } @ReactProp(name = "isDarkMode") public void setDarkMode(FullScreenModalView view, boolean isDarkMode) { view.setDarkMode(isDarkMode); } @ReactProp(name = "animationType") public void setAnimationType(FullScreenModalView view, String animationType) { view.setAnimationType(animationType); } @ReactProp(name = "transparent") public void setTransparent(FullScreenModalView view, boolean transparent) { view.setTransparent(transparent); } @ReactProp(name = "hardwareAccelerated") public void setHardwareAccelerated(FullScreenModalView view, boolean hardwareAccelerated) { view.setHardwareAccelerated(hardwareAccelerated); } @Override protected void onAfterUpdateTransaction(FullScreenModalView view) { super.onAfterUpdateTransaction(view); view.showOrUpdate(); } }

import React, {Component} from "react"; import {requireNativeComponent, View} from "react-native"; const FullScreenModal = requireNativeComponent('RCTFullScreenModalHostView', FullScreenModalView) export default class FullScreenModalView extends Component { _shouldSetResponder = () => { return true; } render() { if (this.props.visible === false) { return null; } const containerStyles = { backgroundColor: this.props.transparent ? 'transparent' : 'white', }; return (  this.props.onShow && this.props.onShow()} onFullScreenRequstClose={() => this.props.onRequestClose && this.props.onRequestClose()}> {this.props.children}  ) } } 

render() { if (this.props.visible) { this.RootSiblings && this.RootSiblings.update(this.renderRootSiblings()); } return null; } componentWillReceiveProps(nextProps) { const { onShow, animationType, onDismiss } = this.props; const { visible } = nextProps; if (!this.RootSiblings && visible === true) { // 表示从没有到要显示了 this.RootSiblings = new RootSiblings(this.renderRootSiblings(), () => { if (animationType === 'fade') { this._animationFadeIn(onShow); } else if (animationType === 'slide') { this._animationSlideIn(onShow); } else { this._animationNoneIn(onShow); } }); } else if (this.RootSiblings && visible === false) { // 表示显示之后要隐藏了 if (animationType === 'fade') { this._animationFadeOut(onDismiss); } else if (animationType === 'slide') { this._animationSlideOut(onDismiss); } else { this._animationNoneOut(onDismiss); } } }

import React, { Component } from 'react'; import { Animated, Easing, Dimensions, StyleSheet, } from 'react-native'; import RootSiblings from 'react-native-root-siblings'; const { height } = Dimensions.get('window'); const animationShortTime = 250; // 动画时长为250ms export default class ModalView extends Component { constructor(props) { super(props); this.state = { a
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue常用组件之confirm用法及说明_vue.js_
                                                                
下一篇：vue项目中使用this.$confirm解析_vue.js_