challenge react native shop list

Défi: projet de liste de magasins

Conception de la liste d'achat avec React Native et Expo .

⚙ pour utiliser le projet

1. Exécutez le clone à votre terminal.

git clone https://github.com/RafaelR4mos/challenge-react-native-shop-list.git 

2. Installez les projets du projet mappé dans package.json

npm install

3. Exécutez la commande d'exécution du projet

npm run start

---

Des idées sur les technologies ont fonctionné

Les icônes de phosphore réagissent indigènes

Utilisez la bibliothèque d'icônes pour la version RN.

npm install phosphor-react-native

Utilisation des icônes:

 import { Basket } from 'phosphor-react-native'

export function Componente() {
  return (
    <Basket 
      size={32}
      color="#FFFFFF"
      weight='bold'
    /> 
  )
}
 

Les composants stylisés réagissent natifs

Composants stylisés et utilisation des thèmes. La plus grande différence pour la version Web est la frappe et la note de la version RN

Importer et utiliser

 //styles.ts

import 'styled-components/native' ;

export const Container = styled . View `
  color: red;
` ; 

Type de thème:

 //tipagem
import 'styled-components/native' ;
import theme from '../theme' ; //caminho do tema

//importante usar o '/native' aqui também.
declare module 'styled-components/native' {
  type ThemeType = typeof theme ;
  export interface DefaultTheme extends ThemeType { }
} 

L'ajout de stylisation aux attributs attrs

Afin qu'il soit possible de consommer le thème de l'application et de ne pas avoir à styliser dans le fichier .tsx lui-même que nous pouvons utiliser dans styles.ts le code suivant:

 //Aqui mudamos os atributos 'size' e 'color' através do arquivo de estilização
export const BackIcon = styled ( CaretLeft ) . attrs ( ( { theme } ) => ( {
  size : 32 ,
  color : theme . COLORS . WHITE ,
} ) ) `` ;

---

Type Union avec type sur TypeScript

Si nous créons un composant personnalisé et qu'il est également nécessaire d'étendre le typage du composant natif, nous pouvons utiliser le code comme base:

 //Importa tipagem do touchable opacity que vem do RN
import { TouchableOpacityProps } from 'react-native' ;

//Com o caractere '&' adiciona os tipos nativos + o que for definido entre chaves
type GroupCardProps = TouchableOpacityProps & {
  title : string ;
} ;

CSS Helper de StyledComponents

Lorsqu'il y a une utilisation de nombreuses variables telles que theme , type , variant et autres dans un composant, il se peut que l'assistance css componotes stylisées contribue à simplifier la syntaxe.

 import styled , { css } from 'styled-components/native' ;

//Com isso `theme` não precisa ser desestruturado em todas propriedades.
export const NumbersOfPlayers = styled . Text `
  ${ ( { theme } ) => css `
    color: ${ theme . COLORS . GRAY_200 } ;
    font-family: ${ theme . FONT_FAMILY . BOLD } ;
    font-size: ${ theme . FONT_SIZE . SM } px;
  ` } ;
` ;

Navigation avec React Navigation

1. Installez la bibliothèque de navigation REACT Core

npm install @react-navigation/native

2. Installez les dépendances pour les projets expo

npx expo install react-native-screens react-native-safe-area-context

3. Installez la stratégie de navigation (pile, tiroir, onglet)

npm install @react-navigation/native-stack

2. Déclarant le contexto des itinéraires et rotas :

routes/app.routes.tsx

 import { createNativeStackNavigator } from '@react-navigation/native-stack' ;

import { MyLists } from '../screens/MyyList' ;

const { Navigator , Screen } = createNativeStackNavigator ( ) ;

//Navigator --> Envolve as rotas
//Screen --> Rota individual com nome e apontando para componente
export function AppRoutes ( ) {
  return (
    < Navigator screenOptions = { { headerShown : false } } >
      < Screen
        name = "myLists"
        component = { MyLists }
      />
    </ Navigator >
  ) ;
}

3. Exposer les itinéraires dans la hiérarchie des applications

index.tsx

 import { NavigationContainer } from '@react-navigation/native' ;
import { useTheme } from 'styled-components/native' ;
import { AppRoutes } from './app.routes' ;
import { View } from 'react-native' ;

export function Routes ( ) {
  const { COLORS } = useTheme ( ) ;

  //NavigationContainer --> Fornece o contexto de navegação para o app.
  // * A estilização da view remove o glitch effect ao trocar de página.

  return (
    < View style = { { flex : 1 , backgroundColor : COLORS . GRAY_600 } } >
      < NavigationContainer >
        < AppRoutes />
      </ NavigationContainer >
    </ View >
  ) ;
} 

Tipando les itinéraires dans @types/

Il est intéressant de dire quels itinéraires existent dans notre application et surtout quels params sont attendus sur chacun des itinéraires

1. Créer un fichier de navigation.d.ts

2. Réécrivez le module Taping dans le fichier

 export declare global {
  namespace ReactNavigation {
    interface RootParamList {
      myLists : undefined ;
      newList : undefined ;
      list : {
        listName : string ;
      } ;
    }
  }
} 

Soumettre et consommer un itinéraire

Parfois, nous devons échanger des informations entre les pages de notre application, pour cela, nous pouvons utiliser Lib react-navigation et ses crochets

1. Importer le crochet useNavigation()

 import { useNavigation } from '@react-navigation/native' ;

2. Déclarer la référence pour le crochet dans une variable

 const navigation = useNavigation ( ) ;

3. Pour naviguer et envoyer des paramètres, utilisez navigate

 navigation . navigate ( 'route' , { state } ) ;

4. Pour recevoir des paramètres:

Il est important d'utiliser le Hook useRoute , qui provient également de react-navigation . En cela, il est possible de perturber les paramètres de route.params Params Ideial est également en diadie quels sont ces paramètres avec le "AS" + Tipage

 const route = useRoute ( ) ;
const { param } = route . params as RouteParams ; 

Utilisation useFocusEffect pour se concentrer sur la page

useFocusEffect est assez similaire à useEffect , mais il est activé chaque fois que la page reçoit une mise au point, c'est-à-dire en plus de la 1ère charge, elle est invoquée si une navigation se produit à la page

Importer:

 import { useFocusEffect } from '@react-navigation/native' ;

Utiliser:

 useFocusEffect (
  useCallback ( ( ) => {
    fetchLists ( ) ;
  } , [ ] )
) ;

useCallBack est utilisé ensemble pour éviter de licencier un rendu inutile, ce qui peut aider les performances de l'application.

---

Stockage asynchrone - React natif

Similaire à l'emplacement du navigateur. Il peut aider à résoudre des problèmes prop-drilling car il centralise les informations en un seul endroit.

Installation:

 npx expo instal @react-native-async-storage/async-storage

Organisation et manipulations avec stockage asynchrone

La dynamique de la gestion de AsyncStorage , similaire à Localstorage, mais asynchrone est différent et il existe un modèle qui peut être utilisé.

1. Création d'un dossier uniquement pour ce storage

2. Création d'un fichier storageConfig.ts pour définir les clés de stockage

Avec cela, nous garantissons une meilleure maintenance dans les clés des éléments enregistrés dans AsyncStorage

 const LIST_COLLECTION = '@shop-list:lists' ;
const ITEM_COLLECTION = '@shop-list:items' ;

export { LIST_COLLECTION , ITEM_COLLECTION } ;

3. Pour chaque entité, nous pouvons créer un dossier et lier les fonctions qu'ils recherchent dans le fichier par fichier.

Exemple: joueur

Archives:

| -List | listCreate.ts | listdelete.ts | listGetall.ts | listGetSingle.ts

 import AsyncStorage from '@react-native-async-storage/async-storage' ;
import { LIST_COLLECTION } from '../storageConfig' ;
import { ShoppingList } from '../../screens/Lists' ;
import { listsGetAll } from './listGetAll' ;
import { AppError } from '../../utils/AppError' ;

export async function listCreate ( newList : ShoppingList ) {
  try {
    const storedLists = await listsGetAll ( ) ;

    const listAlreadyExists = storedLists
      . map ( ( item : ShoppingList ) => item . title )
      . includes ( newList . title ) ;

    if ( listAlreadyExists ) {
      throw new AppError ( 'Já existe uma lista com este nome.' ) ;
    }

    const newStorage = JSON . stringify ( [ ... storedLists , newList ] ) ;
    await AsyncStorage . setItem ( LIST_COLLECTION , newStorage ) ;
    console . log ( storedLists ) ;
  } catch ( error ) {
    throw error ;
  }
}

---

Utiliser useRef() pour gérer les éléments

Nous pouvons utiliser le crochet useRef () pour accéder à la référence d'un élément , et ainsi traiter avec focus() , blur() , entre autres.

Exemple: En soumettant un formulaire, nous pouvons utiliser blur() dans l'élément d'entrée, après tout, l'utilisateur a déjà saisi ce qui était nécessaire, de sorte que l'effet desfoque peut mettre fin au clavier ouvert et supprimer la mise au point de l'entrée.

 //Criação da referência de vinculação
const newListNameInputRef = useRef < TextInput > ( null ) ;

function handleSubmit ( ) {
  ///...

  //Desfoca o elemento
  newListNameInputRef . current ?. blur ( ) ;
}

//IMPORTANTE adicionar o `ref` ao elemento, caso seja um componente é necessário enviar via prop.
return (
  < View >
    < Input
      inputRef = { newListNameInputRef }
      onChangeText = { setNewListName }
      value = { newListName }
      placeholder = "Nome da sua lista"
      autoCorrect = { false }
      onSubmitEditing = { handleAddList }
      returnKeyType = "done"
    / >
  < / View >
) ;

---

Utilisation d'une classe personnelle pour l'erreur

Afin que nous puissions distinguer une erreur générique / inconnue fournie par un throw et une erreur reconnue par notre application, nous pouvons créer une classe avec un attribut message et instancier cette classe, afin que nous puissions collecter instaceof <classe> dans le bloc catch .

Exemple:

1. Classe d'erreur personnalisée: (/utils/apperro.ts)

 export class AppError {
  message : string ;

  constructor ( message : string ) {
    this . message = message ;
  }
}

2. Instanciation de classe

 throw new AppError ( 'Estas lista já esta adicionada!' ) ;

3. Vérifiez l'instance de l'erreur. Si l'instance ne correspond pas à la classe que nous avons créée, dans ce cas, une erreur générique devra être publiée.

 catch ( error ) {
      if ( error instanceof AppError ) {
        Alert . alert ( 'Nova lista' , error . message ) ;
      } else {
        Alert . alert ( 'Nova lista' , 'Não foi possível adicionar' ) ;
        console . error ( error ) ;
      }
    }

---

Par: Rafael Ramos?