ÕªÒª£ºF8´ó»áµÄÖ÷ÌâÕÛÉä³öÒ»¸ö·Ç³£ÖØÒªµÄ¹Ûµã£¬Î´À´Webǰ¶Ë¿ª·¢ÓëNativeÒÆ¶¯Ó¦Óÿª·¢¹¤³ÌʦµÄ¹¤×÷Ö°ÔðºÜ¿ÉÄÜ»áÏà»¥ÖØµþ£¬Æ½Ì¨Ö®¼äµÄ±ß½ç²»»áÌ«Ã÷ÏÔ£¬»¹»á²úÉú¸üרעÓÚ¿çÆ½Ì¨App UI¼°½»»¥¹¹½¨µÄ¡°È«ÖÕ¶Ë¿ª·¢¹¤³Ìʦ¡±¡£
½üÒ»ÄêÒÆ¶¯¿ª·¢ÁìÓò×î»ðµÄ»°Ìâ¾ÍÊÇ¡°WebÓëNativeÕýÔÚÈںϡ±£¬React NativeµÄ³öÏÖÊÇÍÆ¶¯ÈںϵÄÒ»¸ö¹Ø¼üµã¡£ÕýÈçF8´ó»áµÄÖ÷Ìâ¡°Bring modern web tech to mobile¡±£¬¾ÞÍ·ÃÇÒѾ×ÅÊÖ´ÓÉÏ×ÔÏÂÕ¹¿ª¼¼ÊõÈںϣ¬Web App¿ª·¢ÕßÃÇÓëNative App¿ª·¢ÕßÃdz¤ÄêÏ໥±ÉÊÓ¶·ÕùµÄ¹ý³Ì½«Òª¸æÒ»¶ÎÂä¡£

Web App¿ª·¢ÕßÃÇʵÔÚÊÇÊܹ»ÁËHTML5Ó¦ÓõÄÖî¶à»ù´¡ÌåÑéÎÊÌ⣬È磺¼ÓÔØÊ±¼ä³¤£¬Óû§ÌåÑé²î£¬¶¯»Ð§¹ûÈõµÈ¡£Native App¿ª·¢ÕßÔòÊǶÔÓڱ仯µÄÐèÇóÒÔ¼°App StoreÉóºËʱ¼äÎÞ·¨Æ½ºâ¡£
Òò´Ë£¬´ÓReact Native·¢²¼Æð£¬ÈçÒ»ÕóÏÄÈÕÁ¹·ç»½ÐÑÁ˳Á˯µÄ¿ª·¢Õߣ¬Ê¹µÃÕâÀ༼Êõ½üÆÚ±¸ÊܹØ×¢¡£React NativeʵÏÖ½â¾öµÄÊÇǰ¶Ë¿ª·¢Õß¿ÉÒÔʹÓÃÏàͬµÄ¼¼ÊõÌåϵÀ´½â¾ö¿çƽ̨ӦÓÿª·¢µÄÎÊÌ⣬²¢ÒÔ´´½¨HTML¼°CSS×Ó¼¯Í¨¹ýWebCore¼¼ÊõÓëÔÉú½áºÏ¹¹½¨³öÓëÌåÑéÉϼ¸ºõÎÞ²î±ðµÄApp¡£
Ò»À´HTML5ÔÓÐÍ´µã±»Ïû³ý£¬¶þÀ´Ç°¶Ë¼¼ÊõÕ»±»±£Áô£¬ÄѵÀǰ¶Ë¿ª·¢¹¤³ÌʦµÄ´ºÌìÕæµÄÀ´ÁË£¿
WebÓëNative½»µþ£ºÎ´À´µÄÈ«ÖÕ¶Ë¿ª·¢¹¤³Ìʦ
F8´ó»áµÄÖ÷ÌâÕÛÉä³öÒ»¸ö·Ç³£ÖØÒªµÄ¹Ûµã£¬Î´À´¿ÉÄÜWebǰ¶Ë¿ª·¢¹¤³ÌʦÓëNativeÒÆ¶¯Ó¦Óÿª·¢¹¤³ÌʦµÄ¹¤×÷Ö°Ôð»áÏà»¥ÖØµþ£¬Ëù³Ö¼¼Äܼ°¿ª·¢»·¾³»áÇ÷ÏòÓÚͳһ£¬Æ½Ì¨Ö®¼äµÄ±ß½ç²»»áÌ«Ã÷ÏÔ£¬Î´À´µÄ¼¸Äê¿ÉÄÜ»á²úÉúÒ»ÖÖеÄְλ½Ð×ö¡°È«ÖÕ¶Ë¿ª·¢¹¤³Ìʦ¡±£¬ÊôÓÚ¡°È«Õ»¡±ÏµÁеÄǰ°ë²¿·Ö£¬ËûÃÇ»á¸üרעÓÚ¿çÆ½Ì¨AppµÄUI¼°½»»¥¹¹½¨£¬Ê¹¶àƽ̨ÌåÑéÒ»Ö£¬´ÓiOS App¡¢Android Appµ½HTML5 AppµÄUI¿ª·¢¡£
¾Í´Ë·½Ïò£¬React Native²Å¸ø³öÁËÒ»¸ö´óһͳµÄ¿ÚºÅ£º¡°Learn once£¬write everywhere¡±¡£ÎªÊ²Ã´£¿ÏëÏë¾ÍÖªµÀÁË¡£
React NativeÆäʵ²¢²»ËãÊÇм¼Êõ£¬ÒÔÍùBeeFramework£¨XML+CSS£©¡¢NativeScript£¨JS+CSS£©µÈ¶¼ÓÐÀàËÆµÄʵÏÖ£¬µ«ËüÃÇֻרעÓÚNativeƽ̨²¢Ê¹ÓÃÁËһЩ·Ç±ê×¼»ò²»ÎªÇ°¶Ë¿ª·¢Õß¶øÊìÖªµÄ¼¼Êõ¡£
React Native˼ά×î´óµÄ²»Í¬ÔÚÓÚ£¬»ùÓÚReactJSµÄ֪ʶÌåϵ£¬Ö»ÒªÑ§¹ýÒ»´Î¾Í¿ÉÒÔд±éȫƽ̨£¬ÄÇôÎÒÃÇ¿ÉÒÔÈÏΪiOSÖ»ÊÇÒ»¸ö¿ªÊ¼£¨FacebookÒ°ÐÄÊǾ޴óµÄ£©¡£
React NativeÒòºÎ¶øÀ´£¿
React NativeÄܹ»±»Éè¼Æ²¢ÊµÏÖ£¬ÎÒ¸öÈËÒÔΪÊǵÃÒæÓÚ×÷Õß¶ÔÓÚä¯ÀÀÆ÷¼¼ÊõºÍVirtual DOM¼¼ÊõµÄÉî¶È¼¼Êõ˼ά¼°À©Õ¹£¬ÒòΪÔÚ»ùÓÚ´ËÏî¼¼ÊõµÄ»ù±¾Ä£Ðͼ°Ä£Ê½½¨Á¢ºÃµÄÇé¿öÏ£¬¼Ü½ÓÓÚÈκÎÒ»¸öƽ̨À´ÊµÏÖ½«²»ÔÙÊÇÄÑÊ¡£ÎÒÃÇÄܹ»¿´µ½React NativeÖÐÓÐÀàËÆÓÚWebKitµÄÓ°×Ó£¬±ÈÈçShadow ViewºÍCSS Node¡£
ÔÚÄÚ´æÖУ¬ÕâÁ½ÖÖ»ù±¾ÔªËع¹½¨³öÄܹ»±í´ïUI½á¹¹µÄÒ»ÖÖͨÓÃÄ£ÐÍ£¬ÄÇôÔÚÈκÎÒ»¸öƽ̨ÉÏÖ»Òª×ñÑÕâ¸ö¹æÔò£¬¶¼½«¿ÉÒÔÃèÊö³öÒ»¸öUIÊÇ¡°³¤Ê²Ã´Ñù×Ó¡±£¬ÓÐЩÀàËÆÓÚä¯ÀÀÆ÷ÖеÄDOM Tree + Style Tree¡£»ùÓÚ´Ë£¬React Nativeͨ¹ýReactJSÓÖʵÏÖÁËÒ»Ìׯ½Ì¨Î޹صĴ¥¿Ø´¦Àí¼°Êý¾Ý°ó¶¨£¬ÕâÑù½«ÔÀ´Æ½Ì¨Ïà¹ØµÄ´úÂë³éÀëµ½ÁËÆ½Ì¨Î޹صÄJavaScriptÓïÑÔÀ´ÊµÏÖ£¬´ó´ó½µµÍÁËReact Native¿ª·¢Õß¶ÔÆ½Ì¨ÌØÐÔ¼°ÓïÑÔµÄÒÀÀµ¡£
»Ø¹Ëä¯ÀÀÆ÷µÄ·¢Õ¹ÀúÊ·£¬´Ó20ÄêǰNetscape·¢²¼ÁËNavigatorµ½Èç½ñµÄChrome¼°Safari£¬ä¯ÀÀÆ÷Äں˵ı¾ÖÊûÓÐʲô±ä»¯£¬ÊäÈë½øÈëµÄÊÇUIML£¨ÈçHTML£©£¬ÆäºËÐÄWebCore°ïÄã¼ÓÔØ¡¢½âÎö¡¢¹¹½¨¡¢¼ÆËã³öÒ³ÃæÖÐÿ¸öÔªËØ½áµãÉÏϼ¶¹ØÏµ¡¢Î»Öᢼ°Ñùʽ¡£
²»ÐÒµÄÊÇ£¬W3C¶ÔÓÚHTML5±ê×¼µÄÈ·Á¢ÓëÍÆ½øÒ²¹ýÓÚ»ºÂý£¬¶øÇÒ±ê×¼ÓëÐèÇóÃ÷ÏÔÑÏÖØÍѽڣ¬ÆÄÓÐЩ¼¦ÀßÖ®¸Ð¡£W3C¼¸ºõ´íʧÁËÔÚÒÆ¶¯¶ËµÄ²¼¾Ö»ú»á£¬ÉõÖÁÎÒÃDz»Çå³þÕâ°ï´óÀÐÊDz»ÊÇÕæµÄÓп¼ÂÇWeb¼¼ÊõÔÚÒÆ¶¯¶Ë·¢Õ¹µÄδÀ´£¬ÈÃÈ˲»½ûÏëÎÊ£¬ÎªÊ²Ã´React NativeÕâÀ༼Êõ²»ÊÇÓÉGoogleºÍAppleÁ½´óWebKitÓµ»¤Õß¼°ÊÖ»ú²Ù×÷ϵͳ¿ª·¢ÉÌ·¢Æð²¢ÊµÏֵģ¿
δÀ´ÓÖ½«ÈçºÎ£¿
ËùÒÔ£¬´Ëʱ±ØÈ»»á³öÏÖÆäËûһЩ²»¸Ê¼ÅįµÄ¾ÞÍ·¸¡³öË®Ãæ£¬¸ø³ö´ð°¸¡£ÄǾÍÊÇ£¬³¢ÊÔÖØÔì×ã¹»ºÃµÄÇáÁ¿¼¶WebCore£¬ÓÃÓÚÂú×ãͬʱ¾ßÓÐÔÉúÐÔÄܼ°ÌåÑ飬²¢Ò²¾ßÓÐWeb¿ª·¢Ð§ÂʵÄȫм¼Êõ¡£
¹ØÓÚÕâÒ»µã£¬ÎÒ¾õµÃReact NativeÆ«ÀëµÃÓÐЩԶ£¬Facebook×î³õ¸ü¶àµÄÖ»ÊÇΪÁ˽â¾ö×Ô¼ºÄÚ²¿µÄÐèÇó£¬ÏÖÔÚÊÇÏë½èReactJSÎüÒý¸ü¶àµÄ¿ª·¢ÕßÀ´ÖØÔìÒ»¸ö¡°Í¨ÌìËþ¡±¡£
×ÔÈ»£¬Ê±¼ä³¤ÁË»á³öÏÖÁ½ÖÖ½á¹û£¬Ò»ÖÖÊÇWebÓëNativeÈںϣ¬ÁíÒ»ÖÖÔòÊÇWebÓëNative·ÖÁÑ¡£¶ø·ÖÁѵĽá¹ûÊÇ£¬FacebookÇ¿ÐÐ˺ÁÑһЩW3CÉíÉ϶Ô×Ô¼ºÓÐÀûµÄÈ⣬·³´Ö®ºó×ö³ÉReactÕâµÀ²Ë¡£¶ÔÓÚÆóÒµÀ´Ëµ£¬È«Ãæ»»ÓÃReact NativeµÄʱ»ú»¹²»¹»³ÉÊ죬ÖÁÉÙÔÚAndroid°æ±¾ÍƳöºóÔÙ¿´¡£±ÊÕß±¾ÈËÒ²¿´¹ýReact Native iOSµÄʵÏÖ´úÂ뻹Óдý¸ÄÉÆ¡£
È¡¾«»ªÈ¥ÔãÆÉ£¬Samurai-Native¿ò¼ÜÓëReact NativeÓÐÄÄЩ²»Í¬£¿
×îºó£¬ÔÙ˵˵ÎÒËù¿ª·¢µÄNative App¿ò¼ÜSamurai-Native¡£ÓëReact-NativeÏà·´£¬Samurai-NativeµÄÀíÄîÊÇʹNative¿ª·¢Õß¿ÉÒÔʹÓñê×¼Web¼¼Êõ£¨HTML+CSS£©½â¾ö¿çƽ̨UI¿ª·¢µÄÎÊÌ⣬ÒÑÔÚGithubÉÏ¿ªÔ´¡£

Samurai-Native¼Ü¹¹Í¼
Samurai-NativeÓëReact NativeÏà±ÈÓÐ×ÅÖî¶à²»Í¬£¬ºóÕßÔÚNative²¿·ÖÓµÓÐןܶàÒѾÈÃÈËÎÞÁ¦Í²۵ÄʵÏÖ£º
- <Text>²»ÊÇUILabel»òÀàËÆ¿Ø¼þ£¬¶øÊÇdrawRect£¬ÕâÑùµÄÎÊÌâÊÇaccessibilityºÜ²î£¬ÎÞ·¨Ñ¡Ôñ¸´ÖÆÕ³Ìû£¬Ò²ÎÞ·¨ÊµÏÖ¸»Îı¾Ð§¹û¡£
-
<Text>²»ÄÜǶÌ×£¬²»Äܹ»Ê¹ÓÃWeb¿ª·¢Õß˼άÀ´¹¹½¨Îı¾¶Î¡£
-
<List>²»ÊÇUITableView»òUICollectionView£¬¶øÊÇͨ¹ýUIScrollViewʵÏֵļòµ¥ÁÐ±í£¬ÎÞ·¨Âú×ãºóÐø¸´ÔÓÐèÇó¡£
-
²»ÄÜʹÓÃGestureRecognizer£¬¶øÊÇÓÉJS¼òµ¥Åжϵã»÷ÇøÓòÀ´ÊµÏÖÊÖÊÆÊ¶±ð¡£
-
²»ÄÜʹÓÃResponderChain£¬Ê¼þ»úÖÆÖ»ÄÜʹÓÃReactJSÌṩµÄ·½Ê½¡£
-
JSX£ºÈÃÈËÎÞ·¨ÏëÏñµÄÀúÊ·µ¹ÍË£¬W3Cͨ¹ý20Ä꽫 ¡°²¼¾Ö¡¢Ñùʽ¡¢Êý¾Ý¡± ÈýÕß·ÖÏí£¬FacebookÖ»»¨Á˼¸¸öÔ¾ÍÄܺϲ¢µ½Ò»ÆðÁË¡£
-
CSS-layout£¬Ö»Ö§³ÖFlex-Box£¬²»Ö§³ÖFluid£¨Á÷ʽ£©²¼¾Ö¡£
-
CSS²»Ö§³Ö¼Ì³ÐºÍµþ¼Ó£¬²»Ö§³Ö¶àClass¡£
-
HTML±ê×¼±êÇ©¾ùÎÞ·¨Ê¹Óá£
-
Native APIÐèÒªÊÖ¶¯µ¼³ö£¬µ±iOSϵͳÉý¼¶Ê±£¬¿ÉÄÜ»á´øÀ´¼æÈÝÐÔÎÊÌâ¡£
-
¿Ø¼þ±ØÐë¼Ì³Ð×ÔRCTView£¬²¢ÐèÒª¶¨ÒåRCTViewManager£¬ÄÑÒÔ½«ÏÖÓпؼþΪReact-NativeËùÓá£
-
È«¾ÖhookÁË´¥ÆÁʼþ£¬ÓÉroot viewת·¢¸øtouch handler£¬ÔÙÓÃ60fpsµÄtimerˢиøReactJSÀ´´¦Àí£¬ÎÞ·¨ÏëÏñµÄʵÏÖ·½Ê½¡¡
-
ÎÞ·¨Ê¹ÓÃonclick£¬±ØÐë°ü¹üÒ»²ã<TouchableHighlight>£¬Ê¹²¼¾Ö½á¹¹±äµÃ¼«Îª¸´ÔÓ¡£
-
ÐèҪʹÓÃChromeµ÷ÊÔApp£¬¶øÎÞ·¨Ê¹ÓÃÔÉúIDE£¬µ÷ÊÔ¹ý³Ì±äµÃ¼«Îª¸´ÔÓ¡£

Samurai-NativeµÄUI HTMLʾÀý´úÂë
Òò´Ë£¬ÔÚ¿ª·¢Samurai-NativeµÄ¹ý³ÌÖУ¬±ÊÕßרÃÅÕë¶ÔÕâЩÎÊÌâ½øÐÐÁ˸ÄÉÆ£¬È¡React Native¾«»ª£¬ÈÃËüÃdzÉΪSamurai-NativeÖеÄÓÅÊÆ£º
- Ö§³Ö±ê×¼HTML£»
-
Ö§³Ö±ê×¼CSS£»
-
Ö§³ÖUITableView£»
-
Ö§³ÖUICollectionView£»
-
ʹÓÃÔÉúGestureRecognizer£»
-
ʹÓÃÔÉúResponderChain£»
-
UI layout¡¢style¡¢dataÍêÈ«·ÖÀ룻
-
Ö§³ÖFluid²¼¾Ö£»
-
Ö§³ÖÑùʽ¼Ì³ÐºÍµþ¼Ó£¬Ö§³Ö¶àClass£»
-
Ö§³Ö²¿·Ö±ê×¼HTML±êÇ©£¨ÓÐ×öÈ¡Éᣩ£»
-
Ö§³ÖÔÉú¿Ø¼þÖ±½Óµ¼È룬ֻÐèҪͨ¹ý<YourView/> ±êÇ©ÃüÃû¼´¿É£»
-
Ö§³Öonclick¡¢onpan¡¢onswipe¶àÖÖÊÖÊÆ£»
-
ʹÓÃXcodeµ÷ÊÔ¡£
ΪʲôѡÔñHTML+CSSµÄ×éºÏ£¬¶ø²»ÔÙʹÓÃÀàËÆÓÚReact-Native»òBeeFrameworkµÄXML£¿Ö÷ÒªÔÒòÊDz»ÏëÔÙÔìÂÖ×Ó¡£HTML¾¹ý20ÄêµÄʱ¼ä¼ìÑ飬ÒѾ×ã¹»³ÉÊ죬ÊÇ×îºÃµÄ¸´ÔÓUI²¼¾ÖµÄÃèÊöÓïÑÔ¡£

Samurai-Native¹¤×÷Á÷³Ìͼ
ÄÇô×ܽáÆðÀ´£¬Samurai-NativeµÄÖÕ¼«Ä¿±êÊÇÏë×ö³ÉÒ»¸ö±ê×¼µÄWebä¯ÀÀÆ÷Äںˣ¬À´Îª¿ª·¢ÕßÃÇÌṩһ¿îW3C±ê×¼WebCoreµÄ¿çƽ̨UI½â¾ö·½°¸£¬¼ÈÄÜäÖȾWebÒ³Ãæ£¬ÓÖÄÜÉú³ÉÔÉúViewÊ÷¡£Í¨¹ý˽ÓÐä¯ÀÀÆ÷Äں˼¼Êõ£¨Objective-C±àд£©½«HTML+CSS½âÎöäÖȾ³ÉΪNative ViewÊ÷£¬´Ó¶ø¼ÈÓÐWeb¿ª·¢ÌåÑ飬ÓÖÓв»´íµÄÓû§ÌåÑé¡£ |