Cómo usar ReactNative para implementar un menú de cajón inferior de control personalizado
I. Análisis de requisitos
En el desarrollo nativo, se puede decir que la personalización de vistas es común. En muchos casos, los controles del sistema no siempre satisfacen las necesidades reales. Varios diseños de productos requieren que hagamos diferentes vistas. Hay muchas publicaciones de blog en Internet sobre la personalización de Vistas. Esta publicación de blog compartirá con usted cómo personalizar componentes en React Native para lograr el efecto de los controles del menú del cajón. La importancia de compartir funciones en las aplicaciones debe ser evidente, entonces, ¿cómo lograr este efecto en RN?
La biblioteca del sistema React Native solo proporciona una implementación de IOS, ActionSheetIOS. Hay dos implementaciones para la visualización de este control:
(1) showActionSheetWithOptions
(2) showShareActionSheetWithOptions
La primera implementación es mostrar la ventana emergente ActionSheet. en la caja del dispositivo iOS. La segunda implementación muestra una ventana emergente para compartir en el dispositivo iOS. Tomando prestada la descripción de la imagen oficial es la siguiente:
Se ha proporcionado el sistema de implementación en dispositivos IOS. A continuación, debemos adaptarnos a Android. En el desarrollo nativo, personalizar la Vista también es un proceso básico:
(1) Personalice la clase de control y herede la Vista o el control del sistema.
(2) Propiedades personalizadas
(3) Obtener propiedades personalizadas e inicializar una serie de clases de herramientas
(4) Sobrecargar el método onMeasure para medir el control
(5) Si se trata de un diseño personalizado, también debe sobrecargar onLayout para el diseño.
En React Native, el concepto de componentes personalizados es básicamente similar a la personalización nativa. Entonces, siguiendo este proceso, podremos implementarlo paso a paso.
II. Implementación de funciones
1. Implementación de componentes personalizados Componente
exportar la clase predeterminada AndroidActionSheet extiende los atributos personalizados
/ / 1. Declare las propiedades requeridas
static propTypes= {
título: React.PropTypes.string, // título
contenido: React.PropTypes objeto, /. / contenido
mostrar: func, // mostrar
ocultar: React.PropTypes.func, // ocultar
}constructor(props) {
super(props);
this.translateY = 150
this.state = {
visible: falso,
p>
sheetAnim: new Animated.Value(this.translateY)
}
this.cancel = this.cancel.bind( this
);}3. Implementar el diseño básico
/**
* Modal es la capa más externa y ScrollView es la capa de contenido
*/
render() {
const { visible, hojaAnim } = this
return(
lt; Modal
visible ={ visible }
transparente={ verdadero }
AnimationType="none"
onRequestClose={ this.cancel }
g .
gt;
lt; Ver estilo={ estilos.wrapper }gt
lt; TouchableOpacity estilo={ estilos.overlay } ={this .cancel}gt; /TouchableOpacitygt;
lt; Animated.View
style={[styles.bd, {height: this.translateY, {translateY, } transformar: {{translateY：sheetAnim}]}}gt;
{ this._renderTitle() }
lt ScrollView
horizontal={ true }
showsHorizontalScrollIndicator={ false }gt;
{this._renderContainer()}
lt;/ScrollViewgt
lt;/ Animado.Viewgt ; <
lt;/Viewgt
;
lt;/Modalgt;
)
} Puedes ver que definimos el diseño básico arriba, que utiliza el método _renderTitle() para representar el encabezado. sección mientras que el área de contenido se muestra como ScrollView y se puede desplazar horizontalmente, es decir, cuando el elemento del menú excede el ancho de la pantalla, puede deslizar el dedo horizontalmente para seleccionarlo. El método renderContainer se llama internamente para representar el menú:
/**
* Título
*/
_renderTitle() {
const { título, títuloStyle } = this.props
;