React Native Navigation Experimental in Depth

Σε αυτό το σεμινάριο, θα εξετάσω όλα όσα έχω μάθει και θα σας δείξω πώς να δημιουργήσετε ισχυρή πλοήγηση με πλήρη χαρακτηριστικά χρησιμοποιώντας NavigationExperimental.

Το τελικό repo για αυτό το έργο μπορείτε να το βρείτε εδώ.

Το NavigationExperimental δεν είναι πλέον η προτιμώμενη μέθοδος πλοήγησης στο React Native και σύντομα θα καταργηθεί. Θα πρότεινα να ελέγξετε το React Navigation με το τρέχον πρότυπο και την προτιμώμενη μέθοδο πλοήγησης.

Το React Native NavigationExperimental API έχει διανύσει πολύ δρόμο από τότε που ανακοινώθηκε για πρώτη φορά σχεδόν πριν από ένα χρόνο σήμερα.

Τι θα καλύψουμε εδώ:

NavigationCardStack

1. Εφαρμογή ενός μειωτήρα για τη διαχείριση της κατάστασης διαδρομής
2. Προσθήκη κεφαλίδας πλοήγησης
3. Εφαρμογή Redux για τη διαχείριση της κατάστασης διαδρομής
4. Εφαρμογή καρτελών

NavigationTransitioner

1. Εφαρμογή NavigationTransitioner
2. Κάρτα πλοήγησης
3. Κάρτα πλοήγησης με κεφαλίδα
4. Εφαρμογή ενός μειωτήρα για τη διαχείριση της κατάστασης διαδρομής
5. Εφαρμογή Redux για τη διαχείριση της κατάστασης διαδρομής
6. Εφαρμογή προσαρμοσμένης κάρτας πλοήγησης που δημιουργήθηκε από την αρχή χρησιμοποιώντας το Animated.View

Τα κύρια πράγματα που πρέπει να έχετε κατά νου είναι ότι υπάρχουν δύο κύριοι τρόποι χειρισμού της Πλοήγησης χρησιμοποιώντας NavigationExperimental, και αυτοί είναι οι προαναφερθέντες NavigationCardstack και NavigationTransitioner.

Μην αφήνετε τα ονόματα να σας ανησυχούν, μοιάζουν πολύ με το παλιό Navigator και το NavigatorIOS με την έννοια ότι επιστρέφετε το NavigationCardstack ή NavigationTransitioner στη μέθοδο κύριας απόδοσης του στοιχείου σας στο οποίο θέλετε να εφαρμόσετε την πλοήγηση και τους δίνετε ένα renderSene / render μέθοδος.

// Example NavigationCardStack implementation
<NavigationCardStack
  renderHeader={this._renderHeader}
  navigationState={this.state.navState}
  renderScene={this._renderScene} 
/>
// Example NavigationTransitioner implementation
<NavigationTransitioner
  navigationState={navState}
  render={this._render}
  configureTransition={this._configureTransition}
/>

Η κύρια διαφορά είναι ο τρόπος χειρισμού και αιτιολογίας της κατάστασης πλοήγησης.

NavigationCardstack

Για να ξεκινήσετε, θα δημιουργήσουμε μια βασική πλοήγηση χρησιμοποιώντας NavigationCardstack. Το NavigationCardstack μοιάζει περισσότερο με το παλιό Navigator. Το μόνο που χρειάζεται να κάνουμε είναι να περάσουμε στο αντικείμενο navigationState και μια μέθοδο renderScene και κάνει τα υπόλοιπα.

Για να ακολουθήσετε, δημιουργήστε ένα νέο έργο React Native:

react-native init navexperimentalproject

Τώρα, δημιουργήστε ένα αρχείο που ονομάζεται NavigationCardstack.js και, στη συνέχεια, αντικαταστήστε τον κώδικα στα index.ios.js και index.android.js με τον ακόλουθο:

import { AppRegistry } from 'react-native'
import App from './NavigationCardstack'
AppRegistry.registerComponent('navexperimentalproject', () => App);

Στο NavigationCardStack.js θα ξεκινήσουμε δημιουργώντας μια πολύ βασική πλοήγηση χρησιμοποιώντας NavigationCardStack:

1. εισαγωγή NavigationExperimental από το React Native
2. καταστροφή NavigationCardStack από NavigationExperimental
3. δημιουργήστε μια διαδρομή Home που θα χρησιμοποιήσουμε ως αρχική διαδρομή
4. δημιουργήστε έναν μειωτήρα που θα επιστρέψει το αντικείμενο NavigationState. Όπως μπορείτε να δείτε, το αντικείμενο κατάστασης πλοήγησης μοιάζει με αυτό:

{
  index: 0,
  routes: [{ key: 'Home'}]
}

Τα αντικείμενα στον πίνακα διαδρομών θα είναι αυτά που χρησιμοποιούμε στη μέθοδο renderScene για να επιστρέψουμε τη σωστή διαδρομή ενεργοποιώντας το κλειδί.

5. δημιουργούμε το initialState του στοιχείου και εκχωρούμε navState την επιστρεφόμενη τιμή του μειωτήρα, ο οποίος, πάλι, θα είναι το αντικείμενο με και ευρετήριο και ένας πίνακας διαδρομών.

6. Το renderScene θα κληθεί με μερικές ιδιότητες που μπορούμε να χρησιμοποιήσουμε για να προσδιορίσουμε τι θέλουμε να κάνουμε σε αυτό το σημείο:

Αυτό που χρειαζόμαστε είναι η τιμή της σκηνής που αποδίδεται, η οποία θα είναι η τρέχουσα διαδρομή στον πίνακα διαδρομής.

Ενεργοποιούμε το scene.route.key και επιστρέφουμε ένα στοιχείο με βάση την τιμή κλειδιού.

Εάν δώσετε στη διαδρομή σας μια ιδιότητα στοιχείου, π.χ. { key: ‘Home’, component: Home } μπορείτε να καταργήσετε τη δήλωση switch και να επιστρέψετε το στοιχείο κάνοντας αυτό:

_renderScene = (props) => { 
  return <props.scene.route.component />
}

7. επιστρέψτε το NavigationCardStack και περάστε το this.state.navState στην ιδιοκτησία navigationState και renderScene στην ιδιοκτησία renderScene.

Τώρα, θα πρέπει να φορτώσουμε το αρχικό μας στοιχείο:

Τώρα που το έχουμε λειτουργήσει, ας δημιουργήσουμε έναν τρόπο να προχωρήσουμε μπροστά και πίσω σε νέες διαδρομές.

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να ενημερώσουμε τον μειωτήρα για να χειριστούμε νέες αλλαγές διαδρομής. Για να γίνει αυτό, θα χρειαστεί να προσθέσουμε δύο νέα ορίσματα στον μειωτήρα, μια διαδρομή και μια ενέργεια:

function reducer(state, action, route) { ... }

Η κύρια λειτουργικότητα που χρειαζόμαστε αυτή τη στιγμή είναι να προσθέσουμε και να αφαιρέσουμε μια διαδρομή στη στοίβα διαδρομής. Στο προηγούμενο APIS αυτό γινόταν καλώντας push({ route }) και pop(), επομένως θα δημιουργήσουμε παρόμοιες μεθόδους εδώ.

function reducer(state: object, action: string, route: object): object {
  if (!state) {
    return {
      index: 0,
      routes: [{key: 'Home'}],
    };
  }
  switch (action) {
    case 'push': {
      const routes = state.routes.slice();
      routes.push(route);
      return {
        ...state,
        index: routes.length -1,
        routes,
      }
    }
    case 'pop': {
      if (state.index <= 0) return state
      const routes = state.routes.slice(0, -1);
      return {
        ...state,
        index: routes.length - 1,
        routes,
      }
    }
    default:
      return state
    }
}

Εάν αναρωτιέστε τι είναι το (state: object, action: string, route: object), είναι το Flow για να καθορίσετε τον τύπο των ορισμάτων που θα λάβει αυτή η συνάρτηση. Για να μάθετε περισσότερα, ανατρέξτε στο Ροή.

1. Προσθέτουμε δύο νέες παραμέτρους στη συνάρτηση, μια ενέργεια (string) και μια διαδρομή (αντικείμενο)
2. αν δεν υπάρχει υπάρχουσα κατάσταση, επιστρέφουμε την αρχική μας κατάσταση με ένα μοναδικό αντικείμενο διαδρομής.
3. εάν η ενέργεια είναι 'push', τότε δημιουργούμε πρώτα ένα αντίγραφο των διαδρομών και, στη συνέχεια, ωθούμε τη νέα διαδρομή στη συστοιχία διαδρομών. Στη συνέχεια, επιστρέφουμε ένα νέο αντικείμενο κατάστασης, ενημερώνουμε το ευρετήριο και επιστρέφουμε τις νέες διαδρομές.
4. εάν η ενέργεια είναι pop, ελέγχουμε για να δούμε αν ο δείκτης είναι μηδέν και αν ναι επιστρέφουμε την κατάσταση. Εάν δεν είναι, δημιουργούμε ένα αντίγραφο του πίνακα διαδρομών, αφαιρώντας το τελευταίο στοιχείο του πίνακα χρησιμοποιώντας το slice. Στη συνέχεια, επιστρέφουμε μια νέα κατάσταση, ενημερώνουμε το ευρετήριο και επιστρέφουμε τις νέες διαδρομές.

Τώρα που έχουμε ενημερώσει τον μειωτήρα και έτοιμο να ενημερώσουμε το navState μας, ας δημιουργήσουμε μια μέθοδο πλοήγησης που θα καλεί τον μειωτήρα και θα ενημερώνει την κατάσταση.

Στην κλάση NavigationCardStackExample, ας προσθέσουμε μια μέθοδο που ονομάζεται _navigate που θα καλέσει αυτόν τον μειωτήρα και θα ενημερώσει την κατάσταση.

_navigate = (action, route) => {
  const navState = reducer(this.state.navState, action, route)
  this.setState({
    navState
  })
}

Αυτή η μέθοδος θα πραγματοποιήσει μια ενέργεια και μια διαδρομή, θα καλέσει τον μειωτήρα και θα αποθηκεύσει την επιστρεφόμενη τιμή σε μια μεταβλητή που ονομάζεται navState και, στη συνέχεια, θα ενημερώσει την κατάσταση.

Κάθε φορά που αλλάζει το navState, καλείται renderScene με τη νέα κατάσταση πλοήγησης.

Τώρα που δημιουργήσαμε τη νέα μέθοδο, πρέπει να δημιουργήσουμε ένα νέο στοιχείο για πλοήγηση και επίσης να προσθέσουμε ένα κουμπί στο στοιχείο Αρχική σελίδα για πλοήγηση στο νέο στοιχείο. Ας δημιουργήσουμε ένα νέο στοιχείο που ονομάζεται Πληροφορίες και ας ενημερώσουμε επίσης το στοιχείο Home.

const Home = ({ navigate }) => {
  return (
    <View style={styles.container}>
      <Text>Hello from Home</Text>
      <Text onPress={() => navigate('push', { key: 'About' })}>Go To About</Text>
    </View> 
  )
}
const About = ({ navigate }) => (
  <View style={styles.container}>
    <Text>Hello from About</Text>
    <Text onPress={() => navigate('pop')}>Back</Text>
  </View> 
)

Τέλος, μπορούμε να προσθέσουμε το νέο στοιχείο About στη μέθοδο renderScene και να μεταβιβάσουμε τη μέθοδο πλοήγησης ως στηρίγματα και στα στοιχεία About και Home.

_renderScene = (props) => {
  switch(props.scene.route.key) {
    case 'Home':
      return <Home navigate={this._navigate} />
    case 'About':
      return <About navigate={this._navigate} />
  }
}

Τώρα θα πρέπει να μπορούμε να πλοηγούμαστε μεταξύ των σκηνών:

Εάν πιστεύετε ότι ο μειωτήρας είναι περίεργος και ότι είναι λίγο πολύ όσο το να χειρίζεστε όλη τη λογική μόνοι σας, υπάρχει επίσης ένας πολύ καλός τρόπος να αφήσετε τον NavigationExperimental να χειριστεί αυτήν τη λογική για εμάς. Έρχεται με ένα πολύ ωραίο σύνολο χρήσιμων μεθόδων που μπορούμε απλώς να εισαγάγουμε και να χρησιμοποιήσουμε. Είναι τα NavigationStateUtils και μπορούν να χρησιμοποιηθούν ως εξής:

NavigationStateUtils.push(state, route)

Το NavigationStateUtils έχει τις ακόλουθες διαθέσιμες μεθόδους:

get(state: NavigationState, key: string)
has(state: NavigationState, key: string)
push(state: NavigationState, route: NavigationRoute)
pop(state: NavigationState)
jumpToIndex(state: NavigationState, index: number)
jumpTo(state: NavigationState, key: string)
back(state: NavigationState)
forward(state: NavigationState)
replaceAt(state: NavigationState, key: string, route: NavigationRoute)
replaceAtIndex(state: NavigationState, index: number, route: NavigationRoute)
reset(state: NavigationState, routes: Array<NavigationRoute>, index?: number)

Προς το παρόν, μας ενδιαφέρουν μόνο οι push και pop, οπότε ας ξαναγράψουμε τον μειωτήρα μας για να χρησιμοποιήσουμε αυτές τις μεθόδους:

Αρχικά, πρέπει να εισαγάγουμε το NavigationStateUtils από το NavigationExperimental

const {
  CardStack: NavigationCardStack,
  StateUtils: NavigationStateUtils,
} = NavigationExperimental

Στη συνέχεια, στον μειωτήρα μας

function reducer(state, action, route) {
  if (!state) {
    return {
      index: 0,
      routes: [{key: 'Home'}],
    };
  }
  switch (action) {
    case 'push':
      return NavigationStateUtils.push(state, route)
    case 'pop':
      return NavigationStateUtils.pop(state)
    default:
      return state
    }
}

Τώρα, όλα θα πρέπει να λειτουργούν το ίδιο με πολύ λιγότερο κώδικα. Έτσι πρέπει να φαίνεται τώρα ο κώδικάς μας:

Το επόμενο πράγμα που θα κάνουμε είναι να προσθέσουμε ένα στοιχείο κεφαλίδας.

Αρχικά, θα εισαγάγουμε το NavigationHeader από 'react-native'.

const {
  CardStack: NavigationCardStack,
  Header: NavigationHeader,
  StateUtils: NavigationStateUtils,
} = NavigationExperimental

Στη συνέχεια, πρέπει να δημιουργήσουμε το πραγματικό στοιχείο Header.

class Header extends Component {
  _back = () => {
    this.props.navigate('pop');
  }
  _renderTitleComponent = (props) => {
    return (
      <NavigationHeader.Title>
        {props.scene.route.key}
      </NavigationHeader.Title>
    );
  }  
  render() {
    return (
      <NavigationHeader
        {...this.props}
        renderTitleComponent={this._renderTitleComponent}
        onNavigateBack={this._back}
      />
    );
  }
}

Τα κύρια πράγματα που πρέπει να σημειώσουμε εδώ είναι ότι μεταβιβάζουμε όλα τα στηρίγματα στο NavigationHeader καθώς θα χρησιμοποιήσει αυτές τις πληροφορίες για να ενημερώσει τον τίτλο της κεφαλίδας καθώς και να καθορίσει εάν θα εμφανιστεί ή όχι ένα κουμπί επιστροφής.

Περνάμε επίσης μια μέθοδο renderTitleComponent η οποία θα επιστρέψει ένα NavigationHeader.Title με το κλειδί διαδρομής ως τίτλο. Θα μπορούσατε να περάσετε εξίσου εύκολα το <Text>{props.scene.route.key}</Text>, αλλά το NavigationHeader.Titleέρχεται με προεπιλεγμένο στυλ εκτός συσκευασίας.

Το NavigationHeader μπορεί να λάβει τα ακόλουθα ως στηρίγματα, επιτρέποντάς σας να δημιουργήσετε προσαρμοσμένους τίτλους, αριστερά και δεξιά κουμπιά με βάση την εφαρμογή και την κατάσταση διαδρομής:

onNavigateBack: Function
renderLeftComponent: SubViewRenderer
renderRightComponent: SubViewRenderer
renderTitleComponent: SubViewRenderer
style?: any
viewProps?: any
statusBarHeight: number || Animated.Value,

Το SubViewRenderer είναι βασικά μια μέθοδος που επιστρέφει ένα στοιχείο React Native

Στην κλάση NavigationCardStackExample, προσθέστε μια νέα μέθοδο που ονομάζεται _renderHeader:

_renderHeader = (sceneProps) => {
  return (
    <Header
      navigate={this._navigate}
      {...sceneProps}
    />
  )
}

Και τέλος προσθέστε τη μέθοδο renderHeader στο πρόγραμμα πλοήγησης:

<NavigationCardStack
  renderHeader={this._renderHeader}
  navigationState={navState}
  renderScene={this._renderScene}
/>

Τώρα, όταν πλοηγούμαστε προς και από τα διάφορα στοιχεία, θα δούμε ότι υπάρχει η κεφαλίδα πλοήγησης και μας δείχνει τον τίτλο καθώς και ένα κουμπί επιστροφής εάν προχωρήσουμε προς τα εμπρός από την αρχική διαδρομή.

Εφαρμογή Redux

Όπως μπορείτε να δείτε, πρέπει να περάσουμε με μη αυτόματο τρόπο τη μέθοδο πλοήγησης σε κάθε στοιχείο και, στη συνέχεια, θεωρητικά θα πρέπει να περάσουμε αυτή τη μέθοδο ως στηρίγματα στα θυγατρικά στοιχεία προκειμένου να αποκτήσουμε πρόσβαση στις μεθόδους πλοήγησης.

Θα ήταν πολύ πιο ωραίο αν μπορούσαμε να τα διαχειριστούμε όλα αυτά μέσω ενεργειών redux, κάτι που θα κάνουμε τώρα.

Πρώτα, πρέπει να εγκαταστήσουμε όλα όσα θα χρειαστούμε για το Redux:

yarn add redux react-redux

or

npm i redux react-redux --save

Τώρα, θα αναθεωρήσουμε αρκετά την εφαρμογή.

Το πρώτο πράγμα που θα κάνουμε είναι να δημιουργήσουμε τα νέα αρχεία που θα χρειαστούμε για το Redux και να διαχωρίσουμε ορισμένα υπάρχοντα στοιχεία, όπως το Home και το About. Ας δημιουργήσουμε τα νέα αρχεία που θα χρειαστούμε:

touch Home.js About.js configureStore.js constants.js navActions.js navReducer.js NavRootContainer.js rootReducer.js

Εάν έχετε συνηθίσει να εργάζεστε με το Redux, όλα αυτά θα σας φαίνονται πολύ οικεία.

Για να ξεκινήσετε τα πράγματα, ας πάμε στο index.ios.js / index.android.js (ανάλογα με την πλατφόρμα για την οποία αναπτύσσετε) και ας ενημερώσουμε τον κώδικα εκεί.

Θα δημιουργήσουμε ένα root κοντέινερ για την κύρια εφαρμογή μας σε ένα αρχείο που ονομάζεται NavRootContainer, και όπως μπορείτε να δείτε, το επιστρέφουμε ως το κύριο στοιχείο μας για τον πάροχο.

Τώρα, θα δημιουργήσουμε τις ενέργειες redux, τον μειωτήρα, τις σταθερές και την αποθήκευση.

Στο installs.js, δημιουργήστε δύο μεταβλητές που ονομάζονται PUSH_ROUTE και POP_ROUTE:

Στο navReducer.js, δημιουργήστε τον ακόλουθο μειωτήρα:

Όπως μπορείτε να δείτε στο παραπάνω αρχείο, έχουμε ενημερώσει τον μειωτήρα μας ώστε να χρησιμοποιούμε τις σταθερές που δημιουργούμε για ενεργοποίηση, ώστε να μπορούμε να έχουμε συνέπεια με τις ενέργειες πλοήγησής μας.

Τώρα, στο navActions.js δημιουργήστε τις ακόλουθες ενέργειες:

Στη συνέχεια, θα πάρουμε τον μειωτήρα και θα δημιουργήσουμε ένα rootReducer για το configureStore μας για κατανάλωση:

Και στο configureStore:

Τώρα, πρέπει να δημιουργήσουμε τα ενημερωμένα στοιχεία Home και About και να τους επιτρέψουμε να λαμβάνουν στηρίγματα από το redux.

Σημειώστε επίσης ότι στις Home.js και About.js δεν χρησιμοποιούμε πλέον την απαρχαιωμένη μέθοδο πλοήγησης, αλλά αντίθετα χρησιμοποιούμε τις μεθόδους push και pop που είναι διαθέσιμες μέσω redux:

Στη συνέχεια, θα δημιουργήσουμε το NavRootContainer που εισαγάγαμε στα ενημερωμένα αρχεία index.ios.js / index.android.js και θα περάσουμε στις ενέργειες redux και θα δηλώσουμε:

Τέλος, μπορούμε να επιστρέψουμε στο NavigationCardStack και να το καθαρίσουμε και να το ενημερώσουμε ώστε να χρησιμοποιεί redux σε αντίθεση με την κατάσταση:

Τώρα δεν έχουμε μόνο μια ωραία εφαρμογή πλοήγησης έτοιμη, αλλά έχουμε και ρύθμιση redux!

Εφαρμογή κάθετης κίνησης

Τι θα γινόταν αν θέλαμε η σκηνή να μεταβεί από κάτω αντί από δεξιά προς τα αριστερά; Λοιπόν, το NavigationCardStack παίρνει μια ιδιότητα που ονομάζεται κατεύθυνση και η προεπιλογή είναι οριζόντια. Μπορούμε να περάσουμε και κατακόρυφα.

Για να δημιουργήσουμε κάποια μορφή λογικής, ας επιστρέψουμε στον μειωτήρα μας και ας αρχίσουμε να συμβαδίζουμε με την προηγούμενη διαδρομή.

Για να γίνει αυτό, θα χρειαστεί να εγκαταλείψουμε τις λειτουργίες NavigationStateUtils που έχουμε για τη διαδρομή ώθησης και να επιστρέψουμε στον προσαρμοσμένο μειωτήρα μας.

Στο NavReducer, ενημερώστε την θήκη PUSH_ROUTE για να αρχίσετε να συμβαδίζετε με ένα κλειδί prevPushedRoute:

case PUSH_ROUTE: {
  const routes = state.routes.slice();
  routes.push(action.route);
  return {
    ...state,
    prevPushedRoute: action.route,
    index: routes.length - 1,
    routes,
  }
}

Θυμηθείτε ότι αυτή η διαδρομή θα ενημερωθεί μόνο εάν καλείται PUSH_ROUTE και θα τη χρησιμοποιήσουμε για να ελέγξουμε εάν ο τύπος διαδρομής που προωθήθηκε προηγουμένως είναι του τύπου 'modal' και, εάν ναι, θα αποδώσουμε μια κατακόρυφη μετάβαση.

Το επόμενο πράγμα που θα κάνουμε είναι να πάμε στη μέθοδο render στο NavigationCardStack.js και να ελέγξουμε αν ο τύπος prevPushedRoute είναι 'modal' και, αν ναι, ενημερώστε την κατεύθυνση:

render() {
  const { navState } = this.props
  let direction = 'horizontal'
  if (navState.prevPushedRoute && navState.prevPushedRoute.type === 'modal') {
    direction = 'vertical'
  }
  return (
    <NavigationCardStack
      direction={direction}
      renderHeader={this._renderHeader}
      navigationState={this.props.navState}
      renderScene={this._renderScene} 
    />
  )
}

Τώρα, μπορούμε να δημιουργήσουμε ένα νέο κουμπί στο Home που καλεί το στοιχείο About με ένα modal:

const Home = ({ push }) => {
  return (
    <View style={styles.container}>
      <Text>Hello from Home</Text>
      <Text onPress={() => push({ key: 'About' })}>Go To About</Text>
      <Text onPress={() => push({ key: 'About', type: 'modal' })}>Go To About With Modal</Text>
    </View> 
  )
}

Τώρα, όταν κάνουμε κλικ στο νέο κουμπί, παίρνουμε το κάθετο κινούμενο σχέδιο

Το επόμενο πράγμα που θα κάνουμε είναι να προσθέσουμε καρτέλες και στην εφαρμογή και επίσης να μάθουμε για τη χρήση των NavigationTransitioner και NavigationCard, αλλά θα περιμένουμε το μέρος 2 για να τα εφαρμόσουμε ενώ θα αφιερώσουμε λίγο χρόνο για να τυλίξουμε το μυαλό μας γύρω από αυτό :) !

Το τελικό repo για αυτό το έργο μπορείτε να το βρείτε εδώ.

Το όνομά μου είναι Nader Dabit. Είμαι προγραμματιστής στο School Status όπου βοηθάμε τους εκπαιδευτικούς να λαμβάνουν έξυπνες διδακτικές αποφάσεις παρέχοντας όλα τα δεδομένα τους σε ένα μέρος. Ρίξτε μια ματιά στο @schoolstatusapp.

Αν σας αρέσει το React και το React Native, ρίξτε μια ματιά στο podcast μας — React Native Radio στο Devchat.tv

Επίσης, ρίξτε μια ματιά στο βιβλίο μου, React Native in Action που είναι τώρα διαθέσιμο από τις εκδόσεις Manning

Αν σας άρεσε αυτό το άρθρο, προτείνετε και κοινοποιήστε το! Ευχαριστώ για τον χρόνο σου