Cree una vista de tarjeta en React native usando react-native-paper

React Native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

Enfoque: en este artículo, veremos cómo crear una vista similar a una tarjeta en React Native sin usar mucho CSS. Aquí, vamos a crear una tarjeta que tendrá un título en la parte superior, una imagen, un párrafo que proporcionará una descripción de la imagen y un botón.

A continuación se muestra la implementación paso a paso.

Paso 1: Cree un proyecto nativo de reacción

npx react-native init DemoProject

Paso 2: ahora instala react-native-paper

npm install react-native-paper

Paso 3: Cree una carpeta de componentes dentro de su proyecto. Dentro de la carpeta de componentes crea un archivo Cards.js

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso 4: Ahora crearemos una vista simple similar a una tarjeta. Podemos usar los componentes de la tarjeta directamente desde la biblioteca de reactivos nativos en papel.

import React  from "react";
import { Text ,View, StyleSheet } from 'react-native';
import {Card, Button , Title ,Paragraph } from 'react-native-paper';
  
const CreateCard = () => {
      
    return(
         
        <Card style={Styles.container}>
        <Card.Content>
            <Title>Geeks For Geeks</Title>
        </Card.Content>
        <Card.Cover source={{ uri: '
https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3-200x200.png' }} />
       <Card.Content>
        <Paragraph>A Computer Science portal for Geeks</Paragraph>
        </Card.Content>
        <Card.Actions>
          <Button>Add To Favourites</Button>
        </Card.Actions>
      </Card>
         
    )
}
export default CreateCard;
  
const Styles = StyleSheet.create({
    container :{
        alignContent:'center',
        margin:37
    }
})

Paso 5: Ahora, importe CreateCard en su App.js:

import React from 'react';
 import type {Node} from 'react';
 import { StyleSheet, Text, View} from 'react-native';
  
 import CreateCard from './components/Cards'
  
  const App: () => Node = () => {
  
    return (
  
        <View>
           <CreateCard />
        </View>
  
     );
  
};
  
export default App;

Paso para ejecutar la aplicación: Guarde sus Cambios. Abra la terminal y escriba el siguiente comando.

 npx react-native run-android

Producción: