¿Qué son los accesorios en React Native?

Los accesorios se utilizan para proporcionar propiedades a los componentes mediante los cuales se pueden modificar y personalizar. Estas propiedades se pasan a los componentes cuando se crea el componente. Los accesorios se utilizan en componentes predeterminados y definidos por el usuario para ampliar su funcionalidad. Estos accesorios son inmutables y no se pueden cambiar después de la creación del componente.

<View>
    // Remaining application code

<Component prop1 = {some value} 
    prop2 = {some value} ... propn = {some value} />

     // Remaining application code
</View>

El valor de los accesorios del componente está encerrado entre llaves para incrustar la expresión en JSX.

Ejemplo 1: accesorios en el componente predeterminado: en este, veremos el uso de accesorios dentro de un componente que está disponible para nosotros de forma predeterminada.

Creación de la aplicación React Native:

• Paso 1: Cree la aplicación React Native usando el siguiente comando:

  expo init PropsDefaultDemo

• Paso 2: después de crear la carpeta de su proyecto, es decir, PropsDefaultDemo , muévase a ella con el siguiente comando:

  cd PropsDefaultDemo

Estructura del proyecto: Se verá así.

Implementación: escriba el siguiente código en App.js para mostrar la funcionalidad de Props. Aquí mostraremos varias vistas donde cada una tendrá diferentes propiedades.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
  
// Exporting default component
export default function App() {
  return (
    <View style={styles.container}>
      <View style = {styles.style1} />
      <View style = {styles.style2}/>
      <View style = {styles.style3}/>
      <View style = {styles.style4}/>
    </View>
  );
}
  
// Creating styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  style1:{
    backgroundColor: "red",
    height: 100,
    width: 200
  },
  style2:{
    backgroundColor: "green",
    height: 50,
    width: 50
  },
  style3:{
    backgroundColor: "blue",
    height: 100,
    width: 100
  }
});

Paso para ejecutar la aplicación: Ejecute el servidor utilizando el siguiente comando.

npm start

Producción:

Ejemplo 2: accesorios en un componente de usuario En esta sección, veremos el uso de accesorios dentro de un componente definido por el usuario.

Creación de la aplicación React Native:

• Paso 1: Cree la aplicación React Native usando el siguiente comando:

  expo init PropsUserDemo

• Paso 2: después de crear la carpeta de su proyecto, es decir, PropsUserDemo , muévase a ella con el siguiente comando:

  cd PropsUserDemo

Estructura del proyecto: Se verá así.

Implementación: Cree un nuevo archivo de componente llamado ImageFill.js que mostrará una imagen especificada como accesorio un número específico de veces en un accesorio llamado conteo.

import { View, Image, StyleSheet, ScrollView } from 'react-native';
import React from 'react';
  
function ImageFill(props) {
    return (
        <View style={styles.contStyle}>
            {[...Array(props.count)].map(
        () => (
          <Image source={props.image} style = {{height: 100,width: 100, 
          flex:1, flexWrap:'wrap'}}/>
        )
      )}
        </View>
    );
}
  
// Creating styles
const styles = StyleSheet.create({
    contStyle:{
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        width: "100%"  
    }
});
  
// Exporting ImageFill Component
export default ImageFill;

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import ImageFill from './ImageFill';
  
// Exporting default component
export default function App() {
  return (
    <ScrollView style={styles.container}>
      <ImageFill image = {require('./assets/gfglogo.png')} 
      count = {4}/>
    </ScrollView>
  );
}
  
// Creating styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'column',
    flexWrap: 'wrap',
  },
});

Paso para ejecutar la aplicación: Ejecute el servidor utilizando el siguiente comando.

npm start

Producción: