Webã¨ã³ã¸ãã¢ãReact Nativeã§ã¢ããªããªãªã¼ã¹ãã¦ã¿ã
Coineyçªå£ããªãªã¼ã¹ãã¾ãããCoineyï¼ã¹ãã¼ããã©ã³ãã¿ãã¬ããã使ã£ãã¯ã¬ã¸ããã«ã¼ã決æ¸ãµã¼ãã¹ï¼ã®ãµãã¼ãã«ç¹åããã¢ããªã§ãã
çãéã注æ
æ°å¹´åã®ã¢ããªã±ã¼ã·ã§ã³éçºã¯ãã¢ããªã®ã¤ã³ã¹ãã¼ã«ã¨ãããã¼ãã«ã«ãã£ã¦ããã©ã¦ã¶ã§å®çµããWebã¢ããªã±ã¼ã·ã§ã³ã主æµã§ãããããããæè¿ã¯ã¦ã¼ã¶ã¼ã®å¦ç¿ã«ãã£ã¦ã¢ããªã®ã¤ã³ã¹ãã¼ã«ã®ãã¼ãã«ãä¸ããã¾ãããããã§åºã¦ããèãæ¹ãã¢ã³ãã³ããªã³ã°ã§ãã
ï¼ã¢ããªã«å¯¾ãã¦ï¼æ©è½ãçãè¾¼ã¾ãªããã¨ã«ãã£ã¦ãã¦ã¼ã¶ã¼ã«å¯¾ãã¦è¿·ãã®ãªãUIãéçºè ã«å¯¾ãã¦éçºï¼éç¨ã®ã·ã³ãã«ããæä¾ãããã¨ãã§ãã¾ããFacebookãã¡ãã»ã³ã¸ã£ã¼ã¢ããªãæ¬ä½ããåãé¢ããã®ããã®ä¸ä¾ã ã¨èãããã¾ãã
ç§ãã¡ã¯ã¢ã³ãã³ããªã³ã°ã®èãæ¹ã«åããæ¢åã®ã¢ããªã決æ¸é¨åã«ãã©ã¼ã«ã¹ãã¾ãããç³ãè¾¼ã¿ï¼ã¦ã¼ã¶ã¼ãµãã¼ãã«ãã©ã¼ã«ã¹ããã¢ããªãCoineyçªå£ã§ãã
ã¢ããªã®ç¹æ§ãæ´»ãã
ã¢ããªã¨ãã¦ãªãªã¼ã¹ãããã¨ã§ãã¹ããï¼ã¿ãã¬ããã«ç¹åããNative UIãçµã¿è¾¼ããã¨ãã§ãã¾ãããã¦ã¼ã¶ã¼ãããæ £ã親ããã§ããæä½æ§ãå®ç¾ãã¾ããã
ããã«ãã¢ããªã§å¼·åãªæ©è½ã®ï¼ã¤ã§ããããã·ã¥éç¥ã使ããã¨ãã§ãã¾ãããä»ã¾ã§ã®ç³ãè¾¼ã¿ããã¼ã§ã¯ã審æ»çµæã¯ã¡ã¼ã«ã§éããã¦ãã¾ãããã¡ã¼ã«ã ã¨åããã¦ãã¾ã審æ»çµæããããã·ã¥éç¥ã使ããã¨ã§ããæ°ä»ãããããªãã¨æå¾ ããã¾ãã
React Nativeã®ããã¨ãã
React Nativeã¨ã¯ãç°¡åã«ããã¨Webã®æè¡ã§ãã¤ãã£ãã¢ããªã®éçºãã§ãããã¬ã¼ã ã¯ã¼ã¯ã§ããï¼è©³ããã¯æ¬å®¶ï¼ã¡ãªã¿ã«ãFacebookãéçºãã¦ããOSSã§ããéçºå½åã®React Nativeã®ãã¼ã¸ã§ã³ã¯0.4.0ããªãªã¼ã¹ã«ä½¿ç¨ãããã¼ã¸ã§ã³ã¯0.14.2ã§ãããã¡ãªã¿ã«ãä»ã®ææ°ã¯0.26.2ã§ãã
ã³ã¼ãã£ã³ã°ä½æ¥ã¯çè ãï¼äººã§è¡ãã¾ãããæåã¯ãReactï¼fluxãåå¼·ãããã¨ããå§ãã¾ããããµã¤ãããã¸ã§ã¯ãã¨ãã¦ãã£ã¦ãããã¨ããããéçºæéã¯é·ãã§ããå®éã«ããã£ãã³ã¼ãã£ã³ã°æéã¯ç´ï¼ã¶æã§ãã
Webã®æè¡ã§ã¢ããªãéçºã§ãã
iOSã¢ããªéçºã«ã¯Objective-cï¼SwiftãAndroidã¢ããªéçºã«ã¯Javaã®ç¥èãå¿ è¦ã§ããã¤ã¾ããiOSï¼Androidåæã«ãªãªã¼ã¹ããå ´åãæä½ï¼ã¤ã®è¨èªãç¿å¾ããå¿ è¦ãããã¾ããReact Nativeã¯JavaScriptã®ç¥èã®ã¿ã§éçºã§ãã¾ãã
ãã¾ããã£ãããã«ããã©ãããã©ã¼ã 対å¿ã§ãã
Coineyçªå£ã¯å®é¨çãªè©¦ã¿ãå«ãã§ãã¾ãããªã®ã§ã·ã³ãã«ã«æ©ããªãªã¼ã¹ãããã¨ãæé©ã ã¨èãã¾ãããããã§ãã¾ãã¯iOSã¢ããªããªãªã¼ã¹ãã¾ããããã®çµæãã¿ã¦Androidã¢ããªããªãªã¼ã¹ããäºå®ã§ãããã¸ãã¯ã¯ãã®ã¾ã¾ã«ãUIã®æ¹ä¿®ã®ã¿ã§ä»ãã©ãããã©ã¼ã ã«ãªãªã¼ã¹ã§ãã¾ãã
Reactãä»å¾ã®éçºã®é¸æè¢ã«ã§ãã
2015å¹´ãããããReactãæµè¡ã£ã¦ãã¦ãã¾ããCoineyã§ã¯Reactãç¨ããããã¸ã§ã¯ããããã¾ããã§ãããããã§ãReact Nativeã¯Reactã試ã絶好ã®æ©ä¼ã ã¨èãã¾ããã
fluxãæ群ã«ãããããã
Coineyçªå£ã§ã¯ãfluxã使ç¨ãã¾ãããå½æã¯fluxã¢ã¼ããã¯ãã£ã©ã¤ãã©ãªãä¹±ç«ãã¦ããã®ã§ã¨ããããfacebookãªãªã¸ãã«ã使ãã¨ããå¤æã§ããä»ããã ã¨reduxã使ãã®ããã¹ãã»ãã©ã¯ãã£ã¹ã§ããããã
å人çã«ã¯Reactãéçºããä¸ã§fluxã¯ç¸æ§ãæ群ã§ãããå¿ é ã§ã¯ãªããã¨æãã¾ãã
ã©ã¤ãã©ãªãè±å¯
以ä¸ã¯éçºã§ä½¿ç¨ããã¦ããã ããã©ã¤ãã©ãªã§ãããããã£ãéçºãå¹çåãããã©ã¤ãã©ãªããããªãæ©ã段éããæã£ã¦ããã®ãé åã®ã²ã¨ã¤ã§ã¯ãªãã§ããããã
- react-native-device-info â ããã¤ã¹æ å ±ãåå¾ãã¾ããiPad/iPhoneãå¤æããæãªã©ã«ä½¿ç¨ãã¾ããã
2. react-native-google-analytics â Google Analyticsç¨ã®ã©ããã¼ã§ãã
3. react-native-icons â æ°å¤ãã®ã¢ã¤ã³ã³ãã©ã³ããæä¾ãã¾ãã
4. react-native-image-picker â ãåçã¨æ®ãï¼é¸æãã®ãã¤ãã£ãUIã¨æ©è½ãæä¾ãã¾ãã
5. react-native-safari-view â Safari View Controllerã®ã©ããã¼ã§ããWebãªã³ã¯ã使ç¨ããæããã使ç¨ããªãã¨å¯©æ»ã§è½ã¨ããã¾ãã
6. react-native-search-bar â ãµã¼ããã¼UIã§ãã
ã¢ã¤ãã¢ãããã°ã¢ããªããªãªã¼ã¹ããã
以ä¸ã¾ã¨ãã§ãã
ãã£ã±ãããã©ãããã¢ããã«å¯©æ»ï¼å°å£°ï¼
審æ»ã«ã¯ã¨ã¦ãæéããããã¾ãããç´°ããå 容ã¯å²æãã¾ãããWebã¢ããªã±ã¼ã·ã§ã³ã®ãªãªã¼ã¹ã¨ã¯å¤§ããéãã¨ããã§ããWebãªãããã«ãããã¤ã§ãã¾ãããããããã®å³ããã«ãã£ã¦å質ãä¿ããããã¨ãäºå®ã ã¨æãã¾ããã
Webã¨ã³ã¸ãã¢ãã¢ããªéçºã®ç¥èãæã«å ¥ãããã¨ãã§ãã
Xcodeï¼Apple Developerï¼iTunes Connectï¼Test Flightãªã©ãªã©ãiOSã¢ããªãªãªã¼ã¹ã¾ã§ã®ããã¼ãçµé¨ã§ãã¾ããã
ã¢ã¤ãã¢ãå ·ç¾åãã
ããããªããJavaScriptã®ç¥èãæã£ã¦ãã¦ãã¢ããªã®ã¢ã¤ãã¢ãããå ´åããªãªã¼ã¹ãããã¨ããããããªãã§ãã ãããReact Nativeã¯ããªãã®ã¢ã¤ãã¢ã風åããããã¨ãªãã¢ããªãªãªã¼ã¹ãå¯è½ã«ãã¦ããã¾ãã
ãã¾ã
æ¬å®¶ã«Pull Requestãåºãã¦Showcaseã«è¿½å ããã¾ããã