¿Qué es el patrón de representación de prop en React Native?

React Native es un lenguaje basado en javascript que se utiliza para diseñar UI (interfaz de usuario). En este artículo, aprenderemos a renderizar patrones de accesorios en React Native.

Render Props es una técnica en ReactJS para compartir código entre componentes de React usando un accesorio cuyo valor es una función. El componente hijo toma accesorios de representación como una función y los llama en lugar de implementar su propia lógica de representación. En resumen, pasamos una función del componente principal al componente secundario como accesorios de representación, y el componente secundario llama a esa función en lugar de implementar su propia lógica.

Para crear una aplicación React-Native, utilizaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native.

Expo: Es un framework y una plataforma para aplicaciones React universales. Es un conjunto de herramientas y servicios construidos alrededor de React Native y plataformas nativas que lo ayudan a desarrollar, construir, implementar e iterar rápidamente en iOS, Android y aplicaciones web desde la misma base de código JavaScript/TypeScript.

A continuación se muestra la implementación paso a paso del enfoque anterior.

Paso 1: Abra su terminal y ejecute el siguiente comando.

npm install -g expo-cli

Paso 2: ahora expo-cli está instalado globalmente para que pueda crear la carpeta del proyecto ejecutando el siguiente comando.

expo init "projectName"

Paso 3: Ahora ve a la carpeta creada e inicia el servidor usando el siguiente comando.

cd "projectName"

Estructura del proyecto: se verá así

 

Paso para ejecutar la aplicación : para ejecutar el programa React-Native, use el siguiente comando.

npm start web

Ejemplo: en este ejemplo, un botón se pasa como accesorio desde el componente principal. Se muestra un mensaje de alerta al presionar ese botón. 

Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import * as React from 'react';
import { Button,Alert,Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
  
function ChildComponentWithProps(props) {
  return (
    <View>
      <Text>I am Child Component</Text>
      {props.renderProps()}
    </View>
  );
}
  
function ParentComponentPassingProps() {
  return (
    <ChildComponentWithProps
      // Passing render props to the child component
      renderProps={() => {
        return (
          <View>
             <Button
                title="Button from Parent"
                onPress={() => Alert.alert('Hi Geek!! ')}
              />
          </View>
        );
      }}
    />
  );
}
  
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.GFG}>GeeksforGeeks</Text>
      <Text>Rendering prop pattern in React-native</Text>
      <ParentComponentPassingProps />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  GFG: {
    color: 'green',
    fontWeight: 'bold',
  },
});

Producción: