I. Introducción
reaccionar nativo-modal es una mejora, animado y personalizable reaccionar nativos componentes de código modales de diálogo abiertos, API que proporciona un rico, podría satisfacer las diversas necesidades de desarrollo de los cuadros de diálogo bomba, que viene con una máscara capa en forma de pop-modal. Lo utilizan para proporcionar a los usuarios con una pantalla de mensajes de usar, es una opción buena.
En segundo lugar, la instalación
1, NPM instalar xxx --save
NPM instalar reaccionan nativo-modal --save
2, reaccionan nativo xxx enlace
reaccionar nativo enlace reaccionar nativo-modal
En tercer lugar, la propiedad
El componente de diálogo modal proporciona más atributos, de la siguiente manera:
// diálogo de modo de visualización animada, el valor predeterminado slideInUp animationIn: Cadena ; // tiempo de visualización de la animación cuadro de necesidad, por defecto 300 ms animationInTiming: Number; // diálogo Modo oculto animada, el valor predeterminado slideOutDown animationOut: Cadena ; // diálogo ocultar animada el tiempo requerido, por defecto 300 ms animationOutTiming: Número del; // si se debe permitir que el teclado para evitar propiedades de bloqueo, se inicia, no bloquee el cuadro de entrada avoidKeyboard: boolean; // si se cubre toda la pantalla coverScreen: boolean; // si desea mostrar la capa de máscara hasBackdrop : Boolean; // capa de máscara, el color de fondo backdropColor: cadena ; // capa de máscara de transparencia backdropOpacity: Número; // tiempo para mostrar la máscara de capa deseado, por defecto 300 ms backdropTransitionInTiming: Number; // capa de máscara para ocultar el tiempo necesario, por defecto 300 ms backdropTransitionOutTiming: Number; // Compatibilidad con capas de máscara personalizada customBackdrop: nula ; // si se debe utilizar la unidad nativa useNativeDriver: boolean; // altura del equipo (en la lata Ocultar dispositivo de barra de navegación útil) deviceHeight: nulo ; // anchura del aparato (en el dispositivo se puede ocultar la barra de navegación útil) deviceWidth: nulo ; // si el modo oculto cuando el contenido de animación hideModalContentWhileAnimating: Boolean; // si permite evento de deslizamiento propaga al subconjunto (por ejemplo, la modalidad de la ScrollView) propagateSwipe: Boolean; // es visible la isVisible: Boolean; // activar el modo de devolución de llamada cuando se muestra totalmente animación onModalShow: () => nula ; // modo de disparo cuando se mostrará la película de devolución de llamada onModalWillShow: () => nula ; // gatillo de devolución de llamada cuando el modo de película completamente oculto onModalHide: () => nula ; // el modo se activa cuando se oculta la película de devolución de llamada onModalWillHide: () => nula ; // gatillo de la devolución de llamada cuando se hace clic región capa de máscara onBackdropPress: () => nula ; // activa cuando se hace clic en el botón de la capa de máscara devolución de llamada onBackButtonPress: () => nula ; // umbral de barrido, por defecto 100. OnSwipeComplete función se activa cuando alcanzó swipeThreshold: Number; // dirección de barrido swipeDirection: Cadena ; // gatillo de la devolución de llamada en el inicio de barrido onSwipeStart: FUNC; // barrido gatillo una devolución de llamada cuando el móvil onSwipeMove: FUNC; // gatillo de una devolución de llamada cuando el barrido se completa onSwipeComplete: FUNC; // barrido gatillo la devolución de llamada se cancela onSwipeCancel: FUNC; // componente estilos de estilo: los cualquier; // desplazamiento a la ubicación especificada scrollTo: nulo ; // desplazamiento la cantidad de compensación scrollOffset: Number; // máximo rodando offset de scrollOffsetMax: número los; // si se debe permitir el desplazamiento horizontal scrollHorizontal: boolean; // de apoyo de orientación dispositivo supportedOrientations : cadena [];
En cuarto lugar, el uso
/ * * * Muestra Reaccionar aplicación nativa * https://github.com/facebook/react-native * @flow * / import Reaccionar, {} Componente de ' reaccionan ' ; importación { AppRegistry, hoja de estilo, Vista, texto } de ' reaccionan nativo ' ; importación modal de ' reaccionar nativo-modal ' ; exportación predeterminado clase RNApplyComponent extiende el componente { // 初始化estado constructor (apoyos) { super (apoyos); esta.state = {visible: false }; } // 显示 show () { este .setState ({ visible: verdadero }); } // 隐藏 ocultar () { este .setState ({ visibles: falsa }); } // 弹框 _renderModal () { retorno ( < Modal isVisible = { verdadera } animationIn = { ' bounceInUp ' } backdropColor = { ' rojo ' } backdropOpacity = { 0,4 } onBackdropPress = {() => este .hide ()} onModalWillShow = {() => {console.log ( " --- onModalWillShow --- " )}} onModalShow = {() => {console.log ( " --- onModalShow --- " )}} onModalWillHide = {() => {console.log ( " --- onModalWillHide --- " )}} onModalHide = { () => {consola.Iniciar sesión(" --- --- onModalHide " )}} > <Ver style = {[styles.center]}> <Ver style = {[styles.parent, styles.center]}> <styles.content el estilo Texto = {} > le espera pronto </ texto> </ Vista> </ Vista> </ modal> ) } / * Desafíos: modal no sé por qué no puedo controlar su pantalla y ocultar isVisible. Fui a ver la misma pregunta sobre temas de GitHub comunidad https://github.com/react-native-community/react-native-modal/issues/295 , pero no la solución. Creo que reacciono nativo versión es demasiado baja debido a (mi versión 0.44.3, actualización falla en repetidas ocasiones, no hay es cara o cruz). Así que aquí presento la solución se resuelve por el operador ternario, pero no se puede ocultar la animación se muestra. Si no puede contestar dudas, rumores siguientes bienvenidos, muchas gracias. <Modal isVisible = {} this.state.visible onBackdropPress = {() => this.hide ()}> <Ver style = {[styles.center]}> <Ver style = {[styles.parent, styles.center ]}> <style = {texto} styles.content>欢迎您的到来</ texto> </ Vista> </ Vista> </ modal> * / render () { retorno ( <Ver style = {[styles.container , styles.center]}> <style = {texto} styles.content onPress = {() => este .show ()}> Mostrar </ texto> { este .state.visible? este ._renderModal ():nula } </ Ver> ); } } Const estilos = StyleSheet.create ({ contenedor: { flex: 1 , backgroundColor: ' # FFFFFF ' }, centro: { justifyContent: ' centro ' , alignItems: ' centro ' }, padre: { anchura: 300 , altura: 200 , backgroundColor: ' # FFFFFF ' , borderRadius:10 }, contenido: { fontSize: 25 , de color: ' negro ' , textAlign: ' centro ' } }); AppRegistry.registerComponent ( ' RNApplyComponent ' , () => RNApplyComponent);
