تەشنا بىلوگ

سۇپا ئاتلاپ ئەپ ئېچىش توغرىسىدا ئىلگىرىلەردە Hybrid, Html5 قاتارلىقلار بولغان. ھەم قۇرۇلمىسى ئۆزگىرىشچان كۆپ مەزمۇنلارنى كۆرسىتىش ئاساسىي ئ‍ورۇندا تۇرىدىغان تور ئەپلىرىنى ئېچىشتا يامان ئەمەس بىر تاللاش سۈپىتىدە قوللىنىلىپ كەلگەن. بىراق، نېمىلا بولمىسۇن ھەقىقىي مەنىدىكى ئەپ بولماستىن، WebView ئارقىلىق Dom ئېلمىنىتلىرىنى ھاسىللاپ بېرىدىغان بۇ خىلدىكى سۇپا ئاتلىغان ئەپلەرنىڭ ئەجەللىك ئاجىزلىقى بار. يەنى، ھەرىكەت ئۈنۈملىرى راۋان ئەمەس، كۆزنەك ئاتلاش، كونۇپكا ھادىسىلىرى ۋە باشقا قول ئىشارەت بۇيرۇقلىرى ھەقىقەتەنمۇ راۋان ئەمەس. دېمەك، ئىشلەتكۈچى تەسىراتىنى ھەقىقىي ئەپ بىلەن سىلىشتۇرغىلى بولمايدۇ.
سۇپا ئاتلاپ ئەپ ئ‍ېچىشنىڭ يۇقىرىقى ئازابىنى پەسەيتىش ئۈچۈن، React-Native دىن ئىبارەت بىر نەرسە بارلىققا كەلدى. ئىسمىدىن قارىساق: يەرلىك(ھەقىقىي ئەپ دېمەكچى)لەشتۈرۈلگەن React تىن ئىبارەت. يەنى، Facebook نىڭ React ناملىق JS ئامبىرى ئاساسىدا، مەخسۇس كۆچمە ئۈسكۈنە ئەپلىرىگە خاسلاشتۇرۇلغان بىر ئەپ ئېچىش رامكىسىدۇر. ئەلۋەتتە بۇنى يۇقىرىدا تىلغا ئالغان Hybrid, Html5 قاتارلىقلار بىلەن بىر تۈردىكى نەرسە دەپ قاراشقىمۇ بولمايدۇ. گەرچە ھەممىسنىڭ ھەل قىلغىنى سۇپا ئاتلاشتىن ئىبارەت ئوخشاش بىر مەسىلە بولسىمۇ، ئەمەلگە ئاشۇرۇش ماھىيەتلىرى ۋە ئاخىرقى ئۈنۈمى ئوخشىمايدۇ. بۇ ئۈچ نەرسىنىڭ تەپسىلىي سىلىشتۇرمىسىنى تۆۋەندىكى يازمىدىن چۈشىنىشكە بولىدۇ: H5、React Native、Native应用对比分析

مەن React-Native يېڭى ئىلان قىلىنغاندىن باشلاپ ئىزچىل قىزىقىشتا بولۇپ كەلدىم، ھەم بۇ نەرسىنىڭ توختىماي يېڭىلىنىپ، دەسلەپكى IOS كىلا قارىتىلغان ھالىتىدىن ھازىرقى IOS/ANdroid/Windows سېستىمىلىرىدا سۇپا ئاتلاشنى ئەمەلگە ئاشۇرغانغىچە بولغان پىشىپ يىتىلىش تارىخىغا شاھىد بولدۇم. ئارلىقتا شىركەتتە مەلۇم ئىھتىياج تۈپەيلى پۈتۈنلەي RN بىلەن يېزىلغان بىر تۈرنىمۇ ئىشلەپ باقتىم. بۈگۈن RN نىڭ ES6 ئۆلچىمىگە ماسلاشتۇرۇپ ئۆزگەرتىلگەن ئالاھىدىلىكلىرىنى چۈشەنگەچ، ئاددىي بىر ئويۇن يېزىپ باقتىم.

ئەپ ئۈنۈمى

• يۇقىرىقىدەك ئاددىيلا بىر ئويۇن. كۆرۈنمە يۈزىنى ئۇيغۇرچە - خەنزۇچە ئالماشتۇرغىلى بولىدۇ.
• كاتەكچىلىلەرنىڭ ئورنىنى يۆتكەپ، سول تەرەپ ئۈستىدىن - ئوڭ تەرەپ ئاستىغا بولغان يۆنىلىشتە 15 ساننى تەرتىپى بويىچە تىزالىسا يەڭگەن بولىدۇ.
• ئورنى توغرا بولغان كاتەكچىلەرنىڭ ئۈستىگە قىزىل چېكىت بەلگىسى قويۇلۇپ ئەسكەرتىلىدۇ.
• ئەپ Android/IOS لەردە ئوخشاش ئۈنۈمدە ئىجرا بولىدۇ(يۇقىرىقى رەسىمدە ئۈستىدىكىسى iPhone دىكى ئۈنۈمى)
• ئۈنۈمىنى كۆرۈپ باقماقچى بولغان Android ئىشلەتكۈچىلىرىگە: چۈشۈرۈش

ئەپ قۇرۇلمىسى

RN بىلەن ئۇچرىشىپ باققان دوستلارغا مەلۇم، ئادەتتە يېڭى تۈر قۇرغاندا تۈر قۇرۇلمىسى يۇقىرىقى رەسىمدىكىدەك(src, screen قىسقۇچىدىن باشقا) بولىدۇ. يەنى:

• android: بۇ قىسقۇچ ئىچىدە ئەپنىڭ Android نۇسخىسىغا مۇناسىۋەتلىك ھۆججەتلەر بولىدۇ. ئادەتتە بۇنى ئايرىم بىر Android ئەپ سۈپىتىدە، AndroidStudio دا ئېچىشقا بولىدۇ. يەنى RN بۇنىڭ ئىچىدە مۇناسىۋەتلىك gradle تايانچىلىرىنى سەپلەپ، تەييار قىلىپ بەرگەن بولىدۇ.
• ios: ئەپنىڭ ios قىسمىغا مۇناسىۋەتلىك ھۆججەتلەر بولىدۇ. ئوخشاشلا RN گە مۇناسىۋەتلىك تايانچ ئامبارلارنى سەپلەپ تەييار قىلىپ بەرگەن بولىدۇ.
• node_modules: بۇنىڭدا nodejs قۇرۇلمىلىرى، React ۋە React-Native قاتارلىقلار بولىدۇ. دېمەك ئاساسلىق RN مۇھتى موشۇنىڭ ئىچىدە بولىدۇ. ئادەتتە npm install ئارقىلىق قاچىلىنىدىغان بارلىق نەرسىلەر موشۇ قىسقۇچ ئىچىدە بولىدۇ.
• src: بۇ مەن قۇرغان قىسقۇچ بولۇپ. Android/IOS تە ئورتاق ئىشلىتىلىدىغان زاپچاسلار(component) لارنى شۇنىڭ ئىچىگە قويغان.
• screen: بۇمۇ مەن قۇرغان قىسقۇچ. ئىچىدە ئەپ كۆرۈنمە يۈز كەسمە رەسىملىرى ساقلانغان
• index.ios.js/ index.android.js: بۇلار ئىنتايىن مۇھىم ھۆججەتلەر. يەنى ئەپ تۇنجى قوزغالغاندا مەشغۇلات سېستىمىسىغا ئاساسەن ئاپتوماتىك ھالدا مۇناسىپ index دىن باشلىنىدۇ.(ئەلۋەتتە تۈر ئىچىدە android ۋە ios لەردە ئايرىم ئىشلىتىلىدىغان بىر قىسىم js لەرنىمۇ موشۇنىڭدەك xx.android.js/ yy.ios.js شەكلىدە يېزىشقا بولىدۇ. سېستىما ئاپتوماتىك ھالدا مۇناسىپ ھۆججەتنى تېپىپ ئوقۇيدۇ)

ئەپ ئەسلى كودى

پۈتكۈل ئەپ ئەڭ يېڭى بولغان ES6 گرامماتىكىسىدا يېزىلغان. يېڭى ئۆگەنگۈچىلەر ئۈچۈن ئەسلى كودى تەقدىم:
Github تۈر ئادرىسى: https://github.com/teshna01/RN-Game-Dana

git clone https://github.com/teshna01/RN-Game-Dana.git

پروگرامما يۈرگۈش ئۇسۇللىرى Github تۈر بېتىدە تەپسىلىي بېرىلدى.