challenge react native shop list

Tantangan: Proyek Daftar Toko

Desain daftar pembelian dengan React Native dan Expo .

⚙ untuk menggunakan proyek

1. Jalankan klon di terminal Anda.

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

2. Instal proyek proyek yang dipetakan di package.json

npm install

3. Jalankan Perintah Eksekusi Proyek

npm run start

---

Wawasan tentang teknologi yang berhasil

Ikon fosfor bereaksi asli

Gunakan perpustakaan Icon untuk versi RN.

npm install phosphor-react-native

Penggunaan ikon:

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

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

Komponen gaya bereaksi asli

Komponen bergaya dan penggunaan tema. Perbedaan terbesar untuk versi web adalah dalam mengetik dan mencatat untuk versi RN

Impor dan Penggunaan

 //styles.ts

import 'styled-components/native' ;

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

Mengetik Tema:

 //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 { }
} 

Menambahkan stylization ke atribut attrs

Sehingga dimungkinkan untuk mengkonsumsi tema aplikasi dan tidak harus menata file .tsx itu sendiri yang dapat kita gunakan dalam styles.ts kode berikut:

 //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 ,
} ) ) `` ;

---

Ketik Union dengan type pada naskah

Jika kita membuat komponen yang dipersonalisasi dan juga perlu untuk memperluas pengetikan komponen asli, kita dapat menggunakan kode sebagai basis:

 //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 dari StyledComponents

Ketika ada penggunaan banyak variabel seperti theme , type , variant , dan lainnya dalam satu komponen, mungkin hanya penolong css yang berkontribusi untuk menyederhanakan sintaks.

 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;
  ` } ;
` ;

Navigasi dengan react navigasi

1. Instal Perpustakaan Navigasi Reaksi Inti

npm install @react-navigation/native

2. Pasang dependensi untuk proyek expo

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

3. Instal Navigasi Strategi (tumpukan, laci, tab)

npm install @react-navigation/native-stack

2. Mendeklarasikan contexto rute dan 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. Mengekspos rute dalam hierarki aplikasi

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 rute di @types/

Sangat menarik untuk mengetahui rute mana yang ada dalam aplikasi kami dan terutama params mana yang diharapkan pada masing -masing rute

1. Buat file navigation.d.ts

2. Tulis ulang pengetikan modul di file

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

Menyerahkan dan mengonsumsi rute rute

Kadang-kadang kita perlu bertukar informasi antar halaman aplikasi kita, untuk ini, kita dapat menggunakan react-navigation lib dan kaitnya

1. Impor hook useNavigation()

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

2. Menyatakan referensi untuk kait dalam variabel

 const navigation = useNavigation ( ) ;

3. Untuk menavigasi dan mengirim parameter, gunakan navigate

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

4. Untuk menerima parameter:

Penting untuk menggunakan hook useRoute , yang juga berasal dari react-navigation . Dalam hal ini dimungkinkan untuk mengganggu parameter dari dalam route.params Params Idideial juga tiar apa param ini dengan "AS" + Tipage

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

Menggunakan useFocusEffect untuk fokus pada halaman

useFocusEffect sangat mirip dengan useEffect , namun diaktifkan setiap kali halaman menerima fokus, yaitu selain beban pertama yang dipanggil jika navigasi terjadi pada halaman tersebut

Impor:

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

Menggunakan:

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

useCallBack digunakan bersama untuk menghindari menembakkan rendering yang tidak perlu, yang dapat membantu dengan kinerja aplikasi.

---

Penyimpanan Async - Bereaksi Asli

Mirip dengan lokasi browser. Ini dapat membantu memecahkan masalah prop-drilling karena memusatkan informasi di satu tempat.

Instalasi:

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

Organisasi dan manipulasi dengan penyimpanan async

Dinamika berurusan dengan AsyncStorage , mirip dengan LocalStorage, tetapi asinkron berbeda dan ada pola yang dapat digunakan.

1. Pembuatan folder hanya untuk storage ini

2. Pembuatan file storageConfig.ts untuk menentukan kunci penyimpanan

Dengan ini, kami menjamin pemeliharaan yang lebih baik dalam kunci elemen yang disimpan di AsyncStorage

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

export { LIST_COLLECTION , ITEM_COLLECTION } ;

3. Untuk setiap entitas, kami dapat membuat folder dan menautkan fungsi yang mereka cari dalam file dengan file.

Contoh: pemain

Arsip:

| -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 ;
  }
}

---

Menggunakan useRef() untuk menangani elemen

Kita dapat menggunakan hook useref () untuk mengakses referensi elemen , dan dengan demikian berurusan dengan focus() , blur() , antara lain.

Contoh: Dengan mengirimkan formulir, kita dapat menggunakan blur() di elemen input, setelah semua, pengguna telah memasukkan apa yang diperlukan, sehingga efek desfoque dapat mengakhiri keyboard terbuka dan menghapus fokus ke input.

 //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 >
) ;

---

Menggunakan kelas pribadi untuk kesalahan

Sehingga kita dapat membedakan kesalahan generik/tidak diketahui yang disediakan oleh throw dan kesalahan yang dikenali oleh aplikasi kita, kita dapat membuat kelas dengan atribut message dan instantiate kelas ini, sehingga kita dapat mengumpulkan instaceof <classe> di dalam blok catch .

Contoh:

1. Kelas kesalahan yang dipersonalisasi: (/utils/apperro.ts)

 export class AppError {
  message : string ;

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

2. Instantiasi Kelas

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

3. Periksa contoh kesalahan. Jika instance tidak sesuai dengan kelas yang kami buat, dalam hal ini, kesalahan generik harus dirilis.

 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 ) ;
      }
    }

---

Oleh: Rafael Ramos?