إدارة الحالة في تطبيق React Navigation مع Redux

في هذا البرنامج التعليمي ، سأوضح كيفية إدارة التنقل وحالة التطبيق من خلال إنشاء تطبيق بسيط باستخدام React Navigation و Redux.

المتطلب الأساسي : يجب أن تكون بالفعل على دراية بـ React Native و React Navigation و Redux. إذا كنت بدأت للتو في استخدام React Native ، فإنني أوصي بشدة بهذه الدورة التدريبية:

  • الدورة التدريبية الكاملة للفاعلية الأصلية والإعادة

نظرة عامة على التطبيق

سننشئ تطبيقًا مكونًا من صفحتين:

  • الصفحة الرئيسية : تُظهر طريقة عرض الحاوية بلون خلفية محدد وزرًا. عند الضغط على الزر ، يتم عرض الصفحة الثانية.
  • اختر صفحة ملونة : يعرض هذا الأزرار الأحمر والأخضر والأزرق. عند تحديد لون ، يعود التطبيق إلى الصفحة الرئيسية ويعرض لون الخلفية المحدث.

من خلال إنشاء هذا التطبيق ، ستتعلم:

  • كيفية التنقل بين الشاشات المختلفة باستخدام React Navigation
  • كيفية استخدام المخفضات والإجراءات لتحديث حالة التطبيق ، بحيث تتغير الإجراءات على شاشة واحدة على واجهة مستخدم أخرى

بهذه المعرفة ، ستتمكن من إنشاء تطبيقات أكثر تعقيدًا.

ملاحظة: بالنسبة لبقية هذا البرنامج التعليمي ، سأستخدم المصطلحين "صفحة" و "شاشة" لتعني نفس الشيء.

إعداد المشروع (المعرض)

سنقوم ببناء هذا التطبيق باستخدام Expo XDE.

يمكنك تنزيل Expo لنظام التشغيل الخاص بك من صفحة Expo XDE GitHub.

ثم توجه إلى تعليمات التثبيت على Expo Docs. ستوضح لك هذه كيفية تثبيت XDE على سطح المكتب الخاص بك ، وتشغيل التطبيقات داخل Expo على جهاز المحاكاة / الجهاز.

نظرًا لأننا سنقوم بتشغيل التطبيق على جهاز المحاكاة ، فستحتاج أيضًا إلى تنزيل Xcode أو Android Studio.

عند إطلاق إكسبو ، يتم عرض هذه الصفحة:

  • حدد "إنشاء مشروع جديد ..."
  • اختر القالب الفارغ ، وقم بتسمية المشروع redux-navigation

سيتم إنشاء المشروع ، ثم سيبدأ React Native packager.

لتشغيل التطبيق في جهاز المحاكاة ، حدد الجهاز -> فتح في iOS Simula tor.

بمجرد بدء تشغيل جهاز المحاكاة ، تظهر الشاشة التالية:

نظرًا لأن المشروع تم إنشاؤه الآن ، يمكن فتحه باستخدام المحرر الذي تختاره. أنا أستخدم Visual Studio Code مع ملحق React Native Tools.

بناء التطبيق

قبل أن نتمكن من برمجة تطبيقنا ، نحتاج إلى تثبيت جميع التبعيات التي يحتاجها.

افتح Terminal ، وانتقل إلى مجلد المشروع الذي أنشأته في Expo ، واكتب:

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

بعد ذلك ، تأكد من الضغط على زر إعادة التشغيل في المعرض . إذا لم تقم بذلك ، فلن يتم التعرف على التبعيات الجديدة وسيرمي المحاكي شاشة خطأ حمراء إذا حاولت استخدامها.

حان الوقت لبناء تطبيقنا. لقد نظمت مجلدات مشروعي على النحو التالي:

/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 مستقل ، أتنقل بين العمل التعاقدي والمصدر المفتوح والمشاريع الجانبية والتدوين.

أنا @ biz84 على تويتر. يمكنك أيضًا رؤية صفحة GitHub الخاصة بي. ملاحظات ، تغريدات ، صور متحركة مضحكة ، كل الترحيب! المفضل لدي؟ الكثير من ؟؟؟. أوه ، وملفات تعريف الارتباط بالشوكولاتة.