Cómo crear un componente nativo de reacción para Android
Supongamos que necesitamos personalizar un componente, que consta de un pequeño ícono y una descripción de texto del ícono. Se puede configurar el color de fondo y el ancho. y se puede configurar la altura. La siguiente imagen muestra dos de estos componentes.
Primero, cree un nuevo archivo js llamado item.js en el directorio index.Android.js e ingrese la plantilla en él. Cree un nuevo archivo js llamado item.js en el directorio js e ingrese el código de la plantilla en él
/**
* Ejemplo de aplicación React Native
* /facebook/react-native
*/
'use estricto';
var React = require('react-native');
var {
Hoja de estilo,
Texto,
Ver,
Imagen,
} = Reaccionar;
var Elemento = React.createClass({
Ver,
Imagen,
} = React.CreateClass({
Ver,
Imagen,
})createClass({
render: function() {
return (
);
},
}) ;
var estilos = StyleSheet.create({
});
module.exports = Item; 81920212223242526272829303132
Tenga en cuenta la última frase; módulo .exports = Item;, que exporta el componente.
La capa más externa de nuestro componente debe ser una vista, con imágenes y texto anidados dentro de la vista, y la vista, la imagen y el texto tienen estilos correspondientes. , también se puede configurar la dirección de la imagen, también se puede configurar el contenido del texto, el color de fondo, la altura, el ancho y otros estilos de la vista deben pasarse desde el exterior y combinarse con los estilos dentro del componente. se puede lograr usando una matriz de estilo, es decir, estilo = {[estilo1, estilo2, estilo3]}, la información finalmente devuelta en la función de representación es la siguiente.
12341234 Ahora obtenemos el valor del externo propiedad de configuración var outStyle={ ancho:parseInt(this .props.width), alto:parseInt(this.props.height), backgroundColor:this.props.color, } var img=this.props.props.text;12345671234567 Por lo tanto, el código final se ve así var Item = React.createClass({ render: function() { var outStyle={ ancho:parseInt(this.props.width), alto:parseInt(this.props.height), El código final se parece a este props.height), backgroundColor:this. props.color, } var img=this.props.img; var text=this .props.text; return ( ); }, });12345678910111213141516171234567891011121314151617 Internamente también tenemos que darle estilo var estilos = StyleSheet.create({ item:{ justifyContent:'center', alignItems:'center', borderRadius: 10, margenIzquierdo:5, margenDerecho:5, margenArriba: 5, margenAbajo:5, }, imagen:{ ancho:48, alto:48, }, text:{ color:'#ffffffff', alignItems: center' } }); 1121314151617181920 Por supuesto, también puede extraer más propiedades de esta vista como propiedades personalizadas, este ejemplo es solo para fines de demostración, por lo que extrae varias propiedades separadas ¿Cómo funciona? ? Además es muy sencillo introducir el componente en el archivo que queremos utilizar, utilizar las etiquetas definidas y establecer las propiedades correspondientes. Introducir componentes var Item = require('. /item');11 Usar componentes var AwesomeProject = React. createClass({ render: function() { return ( < Estilo del elemento={styles.item1} color='#aaa' width='100' height='100' text='Icon' img='/lizhangqu/androidicons /master/assets/blue_dark/xhdpi/ic_action_achievement.png'> /Item> justifyContent:'centro', alignItems:'centro' , color de fondo:'#ff0000' }, elemento1:{ margen izquierdo:100, }, item2:{ marginLeft: 100, } }); 25 Puede ver que estamos usando la etiqueta Item en la función de renderizado y configurando propiedades personalizadas en la etiqueta que eventualmente se establecerá en nuestro componente.