Διαχείριση κατάστασης σε μια εφαρμογή React Navigation με το Redux

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

Προαπαιτούμενο : πρέπει να είστε ήδη εξοικειωμένοι με το React Native, το React Navigation και το Redux. Εάν μόλις ξεκινήσετε με το React Native, προτείνω ιδιαίτερα αυτό το μάθημα:

  • Το πλήρες πρόγραμμα React Native και Redux

Επισκόπηση εφαρμογής

Θα δημιουργήσουμε μια εφαρμογή που αποτελείται από δύο σελίδες:

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

Δημιουργώντας αυτήν την εφαρμογή, θα μάθετε:

  • Πώς να πλοηγηθείτε μεταξύ διαφορετικών οθονών με το React Navigation
  • Πώς να χρησιμοποιήσετε μειωτές και ενέργειες για την ενημέρωση της κατάστασης της εφαρμογής, έτσι ώστε οι ενέργειες σε μια διεπαφή χρήστη της μονάδας οθόνης να αλλάζουν σε άλλη

Με αυτές τις γνώσεις, θα μπορείτε να δημιουργήσετε πιο περίπλοκες εφαρμογές.

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

Ρύθμιση έργου (Expo)

Θα δημιουργήσουμε αυτήν την εφαρμογή με το Expo XDE.

Μπορείτε να κατεβάσετε το Expo για το λειτουργικό σας σύστημα από τη σελίδα Expo XDE GitHub.

Στη συνέχεια, κατευθυνθείτε στις οδηγίες εγκατάστασης στα Έγγραφα Expo. Αυτά θα σας δείξουν πώς να εγκαταστήσετε το XDE στην επιφάνεια εργασίας σας και να εκτελέσετε εφαρμογές στο Expo σε προσομοιωτή / συσκευή.

Καθώς θα εκτελούμε την εφαρμογή στον προσομοιωτή, θα πρέπει επίσης να κατεβάσετε το Xcode ή το Android Studio.

Κατά την έναρξη του Expo, παρουσιάζεται αυτή η σελίδα:

  • Επιλέξτε "Δημιουργία νέου έργου ..."
  • Επιλέξτε το κενό πρότυπο και ονομάστε το έργο redux-navigation

Το έργο θα δημιουργηθεί και μετά θα ξεκινήσει το React Native packager.

Για να εκτελέσετε την εφαρμογή στον προσομοιωτή, επιλέξτε Συσκευή -> Άνοιγμα στο iOS Simula tor.

Μετά την εκκίνηση του προσομοιωτή, εμφανίζεται η ακόλουθη οθόνη:

Καθώς το έργο έχει πλέον δημιουργηθεί, μπορεί να ανοίξει με τον εκδότη της επιλογής σας. Χρησιμοποιώ το Visual Studio Code με την επέκταση React Native Tools.

Δημιουργία της εφαρμογής

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

Ανοίξτε ένα τερματικό, μεταβείτε στο φάκελο έργου που δημιουργήσατε στο Expo και πληκτρολογήστε:

npm install --save react-navigation redux react-reduxnpm install

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

Ώρα να φτιάξουμε την εφαρμογή μας. Οργάνωσα τους φακέλους του έργου μου ως εξής:

/src /actions ColorChangedAction.js /components AppNavigator.js ChooseColorPage.js MainPage.js /reducers AppReducer.js ColorReducer.js NavReducer.js /state Colors.js

Μπορείτε να αναπαραγάγετε την ίδια δομή από το τερματικό σας:

cd redux-navigationmkdir src && cd srcmkdir actions && cd actions && touch ColorChangedAction.js && cd ..mkdir components && cd components && touch AppNavigator.js ChooseColorPage.js MainPage.js && cd ..mkdir reducers && cd reducers && touch AppReducer.js ColorReducer.js NavReducer.js && cd ..mkdir state && cd state && touch Colors.js && cd ..

Αντιγράψτε-επικολλήστε τον ακόλουθο κώδικα στο Colors.jsαρχείο:

Στη συνέχεια, δημιουργήστε το MainPageμε ένα προεπιλεγμένο χρώμα φόντου και ένα κουμπί:

Μερικές σημειώσεις:

  • MainPage είναι ένα στοιχείο React και όχι ένα λειτουργικό συστατικό χωρίς κατάσταση, επειδή θα πρέπει να έχει πρόσβαση στην κατάσταση της εφαρμογής
  • Χρησιμοποιώ flex: 1, alignSelf: 'stretch'για να κάνω την προβολή κοντέινερ να επεκταθεί σε ολόκληρη την οθόνη
  • Το χρώμα της προβολής κοντέινερ ορίζεται στη selectedColor()μέθοδο, την οποία λαμβάνει δείγματα REDαπό τον COLORSπίνακα μας και επιστρέφει τον αντίστοιχο δεκαεξαδικό κώδικα
  • Έχω προσθέσει έναν άδειο onChooseColor()χειριστή για την εκδήλωση τύπου. Θα προσθέσουμε το σώμα αυτής της μεθόδου αργότερα.

Ήρθε η ώρα να συνδέσουμε MainPageτο ριζικό μας App.jsαρχείο. Αντικαταστήστε τα παλιά περιεχόμενα με αυτό:

Η ανανέωση του προσομοιωτή αποδίδει αυτό:

Όχι όμορφο, αλλά δείχνει το χρώμα του φόντου και το κουμπί μας, όπως προορίζεται.

Ακολουθεί ένα στιγμιότυπο αυτού που έχουμε δημιουργήσει μέχρι τώρα: GitHub Code Snapshot 1.

Προσθήκη πλοήγησης

Είμαστε πλέον έτοιμοι να προσθέσουμε κάποια πλοήγηση στην εφαρμογή μας.

Για να το κάνετε αυτό, ανοίξτε το AppNavigator.jsαρχείο και προσθέστε αυτά τα περιεχόμενα:

Αυτός ο κωδικός δανείζεται από το Παράδειγμα Redux στο έργο αντιδράσεων πλοήγησης.

It defines a StackNavigator, using our MainPage as its main screen.

It also sets up AppWithNavigationState, a top-level container holding the navigation state. If this seems unclear, don’t worry. This is standard boilerplate code in React Navigation and we’ll just use it for now to get things going.

Time to write the navigation reducer, which will hold the navigation state inside the Redux store. Open the NavReducer.js file and add the following:

This reducer defines the initial navigation state of our app. Again, boilerplate code.

Now, let’s open the AppReducer.js file and add this:

As our application grows, we may need other reducers alongside our NavReducer. So we can combine them all together inside AppReducer.

Finally, we’re able to update our App.js to use all these new goodies:

The render method returns a provider with the created redux store, and holds our top-level component. Again, this is just boilerplate code needed to hook things up with Redux.

If we refresh the simulator, we now see a navigation bar appearing on top:

After all this code, you may get some errors on your simulator if anything is missing. If so, use this code snapshot to get back on track: GitHub Code Snapshot 2.

Show the Choose Color Page

Now that we have a MainPage inside a StackNavigator, we’re ready to add the ChooseColorPage so we can navigate to it.

Open the ChooseColorPage.js file and add the following code:

A few notes:

  • The code in the render() method iterates through each color, and maps it into a Button. The title and color properties are set.
  • When the button is tapped, the onSelectColor() handler is called with the appropriate color key.
  • The navigation object is accessible via props. In fact, it is injected into all the screens in our AppNavigator.
  • Calling this.props.navigation.goBack() takes us back to the previous screen in the AppNavigator.
  • At this stage, colorName is not yet used to set any state.

Next, we have to make our AppNavigator aware of the new ChooseColorPage screen. Let’s update it in the AppNavigator.js file:

Finally, add the code to navigate to the ChooseColorPage when the Choose Color button is tapped on the MainPage.

If we refresh the simulator now and tap on Choose Color, the app navigates to the new screen, which shows three buttons:

Note: Calling navigation.navigate('ChooseColor') works because we have named ChooseColor as one of the routes in our AppNavigator.

Tapping on the back button or on any of the color buttons brings us back to the main page, but the background color doesn’t change according to our selection.

Let’s fix that in the next section.

Again, if something is not working, you can get my saved code snapshot to this point: GitHub Code Snapshot 3.

Managing application state

We’ll use Redux to set the background color of our MainPage as our application state.

To do this, we need to define a Color Changed action, and a Color Reducer.

Open the ColorChangedAction.js file and add the following:

Then, open ColorReducer.js add add this:

In order for this reducer to be used, we need to add it to the AppReducer.js like so:

Now, we’re ready to call our colorChanged action when the user selects a color in the ChooseColorPage. This is the updated ChooseColorPage.js file:

Note that we have made three changes:

  • Imported the colorChanged action at the top
  • Connected it with connect() and mapStateToProps
  • Used it inside onSelectColor(colorName)

At this stage, we can refresh the simulator and run. If we choose a different color, the background color of the MainPage still doesn’t change.

This is because we haven’t told MainPage to use the new state.

Easy to fix. Open MainPage.js and add the required code:

A few notes:

  • mapStateToPropsnow sets the colorName from the state in the ColorReducer
  • This is then accessible via the props object and can be used inside selectedColor()
  • Don’t forget to import { connect } from 'react-redux'; at the top

If we try the app again in the simulator, we are now able to change the background color. ?

Updated snapshot: GitHub Code Snapshot 4.

Bonus: Presenting the Color Selection Page Modally

When we tap the Choose Colorbutton in the MainPage, the ChooseColorPage slides in from the right. This is the default navigation animation inside StackNavigator.

What if we wanted to present the ChooseColorPage modally instead?

This is easily done by changing the configuration of our AppNavigator like so:

Note the addition of navigationOptions with a headerLeft: null property inside ChooseColor, and the mode: ‘modal’ parameter.

If we try this on the simulator, the ChooseColorPage now slides in from the bottom.

React Navigation is very customizable. I recommend spending some time reading the documentation for the project, to learn all the things you can do with it.

Wrap Up

We have learned how to:

  • Setup and use Expo to run a mobile app on the simulator
  • Build an app with two different pages and navigate between them with React Navigation
  • Use actions and reducers to modify state from a screen, and use it to update the UI on another

You can find the complete source code on GitHub here.

I also shared the project publicly on Expo here.

I hope you enjoyed this tutorial. A good next step from here is to look at the official React Navigation Examples, as well as the other tutorials from the community.

Comments and feedback are appreciated. ?

And if you ???, I may even do a step-by-step video tutorial. ?

Σχετικά με εμένα: Είμαι ανεξάρτητος προγραμματιστής iOS, κάνω ταχυδακτυλουργίες μεταξύ συμβάσεων εργασίας, ανοιχτού κώδικα, δευτερευόντων έργων και blogging.

Είμαι @ biz84 στο Twitter. Μπορείτε επίσης να δείτε τη σελίδα μου στο GitHub. Σχόλια, tweets, αστεία gif, όλα ευπρόσδεκτα! Το αγαπημένο μου? Πολλά ???. Ω και μπισκότα σοκολάτας.