react native适合进行游戏开发吗 react native开发app好用么

react native\u9002\u5408\u8fdb\u884c\u6e38\u620f\u5f00\u53d1\u5417

\u6211\u5c31\u7528react native\u505a\u4e86\u4e2a\u6e38\u620f\uff0c\u4f60\u53ef\u4ee5\u5728\u82f9\u679capp store \u641c studious bear \u4e2d\u6587\u540d\u53eb \u5b66\u9738\u718a\uff0c\u4e0b\u8f7d\u6765\u770b\u770b\u6548\u679c\u3002
\u6211\u7528\u7684\u662fGitHub\u4e0a\u4e00\u4e2a\u6fb3\u5927\u5229\u4e9a\u4eba\u5199\u7684\u6e38\u620f\u5f15\u64ce\uff0c\u53ebreact-native-game-engine\uff0c\u5728\u6211\u7684\u6e38\u620f\u7684credits\u91cc\u9762\u6709\u6807\u6ce8\uff0c\u6211\u548c\u4ed6\u4ea4\u6d41\u8fc7\uff0c\u4e00\u4e2a\u633a\u4e0d\u9519\u7684\u4eba\u3002\u91cc\u9762\u7528\u7684\u7269\u7406\u78b0\u649e\u6a21\u578b\u5219\u6765\u81eamatter-js\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4e0a\u7f51\u641c\u4e00\u4e0b\uff0c\u5f88\u591ah5\u7f51\u9875\u6e38\u620f\u4e5f\u7ecf\u5e38\u7528\u5230\u3002
\u7136\u540e\u6211\u6765\u8c08\u8c08\u6211\u7684\u770b\u6cd5\u5427\uff0c\u600e\u4e48\u8bf4\u5462\uff0c\u53ea\u80fd\u9002\u7528\u4e8e\u67d0\u4e9b\u52a8\u753b\u4ee5\u53ca\u4ea4\u4e92\u548c\u54cd\u5e94\u7b80\u5355\u7684\u6e38\u620f\u5427\u3002\u4f8b\u5982\u6211\u505a\u7684\u8fd9\u4e2a\u6e38\u620f\uff0c\u6211\u611f\u89c9\u6211\u5df2\u7ecf\u5728\u6027\u80fd\u5141\u8bb8\u7684\u8303\u56f4\u5185\uff0c\u628a\u6211\u60f3\u5b9e\u73b0\u7684\u4e1c\u897f\u4ee5\u53ca\u7528\u6237\u4f53\u9a8c\u7684\u5e73\u8861\u53d1\u6325\u5230\u6781\u81f4\u4e86\u3002\u611f\u89c9\u5c31\u662f\u4e3a\u4e86\u7167\u987e\u6027\u80fd\u5236\u8098\u592a\u591a\u4e86\uff0c\u573a\u666f\u4e00\u590d\u6742\u6709\u65f6\u4f1a\u6709\u6389\u5e27\u73b0\u8c61\uff0c\u53d1\u70ed\u6709\u70b9\u4e25\u91cd\uff0c\u52a8\u753b\u4e0d\u80fd\u505a\u7684\u592a\u591a\uff0c\u5f88\u591a\u6211\u60f3\u5b9e\u73b0\u7684\u4e1c\u897f\u6ca1\u529e\u6cd5\u53bb\u5b9e\u73b0\uff0c\u505a\u4e0d\u4e86\u8fdb\u4e00\u6b65\u6df1\u5165\u7684\u4e1c\u897f\u3002\u8fd8\u6709\u5c31\u662f\u5f00\u53d1\u7684\u65f6\u5019\uff0c\u5982\u679c\u662f\u505a\u9759\u6001\u7684\u753b\u9762\uff0c\u52c9\u5f3a\u7528debug\u6a21\u5f0f\u8fd8\u884c\uff0c\u8981\u662f\u505a\u52a8\u6001\u7684\u753b\u9762\u5c24\u5176\u662f\u4f60\u6e38\u620f\u505a\u590d\u6742\u540e\uff0cdebug\u6a21\u5f0f\u6839\u672c\u5c31\u8dd1\u4e0d\u8d77\u6765\uff0c\u5361\u5f97\u8981\u6b7b\uff0c\u6211\u7528\u7684\u662fiphone 6s\u771f\u673a\uff0c\u4f60\u7528\u6a21\u62df\u5668\u7684\u8bdd\u5c31\u4e0d\u7528\u518d\u60f3\u4e86\uff08\u6211\u7528\u7684\u662fmacbook air\u5f00\u53d1\uff0c\u673a\u5668\u597d\u53ef\u80fd\u4f1a\u5feb\u5f88\u591a\uff09\uff0c\u6240\u4ee5\u5f88\u591a\u65f6\u5019\u6211\u53ea\u80fd\u53d1\u5e03release\u7248\u672c\u6d4b\u8bd5\uff0c\u5c24\u5176\u4e00\u5173\u5173\u5361\u505a\u5b8c\u540e\uff0c\u6162\u6162\u8c03\u6574\uff0c\u6539\u4e00\u6b21\u5c31\u53d1\u5e03\u4e00\u6b21\uff0c\u56e0\u6b64\u5bfc\u81f4\u6211\u7684\u5f00\u53d1\u65f6\u95f4\u5f88\u957f\uff0c\u4e25\u91cd\u5f71\u54cd\u6548\u7387\u3002\u4f46\u662f\u53d1\u5e03release\u7248\u672c\u6d4b\u8bd5\u8fd8\u662f\u633a\u6d41\u7545\u7684\uff0c\u95ea\u9000\u60c5\u51b5\u4e5f\u5f88\u5c11\u53d1\u751f\u3002\u5b89\u5353\u673a\u6211\u60f3\u4f53\u9a8c\u7684\u8bdd\u7b80\u76f4\u4f1a\u662f\u707e\u96be\uff0c\u5c24\u5176\u662f\u4f4e\u7aef\u673a\uff0c\u6240\u4ee5\u8fd9\u4e2a\u6e38\u620f\u6211\u4e5f\u6ca1\u518d\u5f00\u53d1\u5b89\u5353\u7248\u672c\u3002

\u4e00\u4e2a\u8d44\u6df1iOS\u5f00\u53d1\u8005\u5bf9\u4e8eReact Native\u7684\u770b\u6cd5
\u5f53\u6211\u7b2c\u4e00\u6b21\u5c1d\u8bd5ReactNative\u7684\u65f6\u5019\uff0c\u6211\u89c9\u5f97\u8fd9\u53ea\u662f\u7f51\u9875\u5f00\u53d1\u8005\u6d89\u8db3\u539f\u751f\u79fb\u52a8\u5e94\u7528\u9886\u57df\u7684\u6b6a\u95e8\u90aa\u9053\u3002
\u6211\u8ba4\u4e3a\u4e00\u4e2ajs\u5f00\u53d1\u8005\u53ef\u4ee5\u4f7f\u7528javascript\u6765\u6784\u5efaiPhone\u5e94\u7528\u786e\u5b9e\u662f\u4e00\u4ef6\u5f88\u9177\u7684\u4e8b\u60c5\uff0c\u4f46\u662f\u6211\u5f88\u5feb\u653e\u5f03\u4e86\u81ea\u5df1\u53bb\u4f7f\u7528\u5b83\u7684\u5ff5\u5934\u3002\u6bd5\u7adf\u6211\u56e0\u4e3a\u7231\u597d\u800c\u4ece\u4e8bios\u539f\u751f\u5f00\u53d1\u591a\u5e74\uff0c\u5e76\u4e14\u76ee\u524d\u4e3a\u6b62\u5df2\u7ecf\u5f88\u719f\u6089\u8fd9\u4e00\u5957\u5f00\u53d1\u4e13\u4e1a\u5de5\u5177\u3002
\u6211\u5df2\u7ecf\u521b\u9020\u4e86\u4e00\u4e9b\u6211\u5f15\u4ee5\u4e3a\u50b2\u7684iOS\u5e94\u7528\u2014\u2014\u4e00\u4e9b\u4f7f\u7528Object\uff0dC\u548cXcode\u6784\u5efa\u7684\u5e94\u7528\uff0c\u901a\u5e38\u4eba\u4eec\u90fd\u662f\u8fd9\u4e48\u505a\u7684\u3002\u8fd9\u4e24\u6837\u5de5\u5177\u662f\u82f9\u679c\u516c\u53f8\u63d0\u4f9b\u7684\u3001\u7528\u6765\u5f00\u53d1iOS\u5e94\u7528\u7684\uff0c\u6240\u4ee5\uff0c\u6211\u548c\u5176\u4ed6\u7684\u82f9\u679c\u5f00\u53d1\u8005\u90fd\u5728\u7528\u3002\u5e76\u4e14\u5f53\u4e24\u5e74\u524d\u82f9\u679c\u516c\u53f8\u53d1\u5e03Swift\u65f6\uff0c\u6211\u4e5f\u6beb\u4e0d\u72b9\u8c6b\u5730\u53bb\u5c1d\u8bd5\u5b83\u3002
Swift\u4f9d\u65e7\u88ab\u4f7f\u7528\u5728Xcode\u4e2d\uff0c\u5e76\u4e14\u4f9d\u65e7\u662f\u82f9\u679c\u516c\u53f8\u63a8\u8350\u7684\u5f00\u53d1\u65b9\u5f0f\uff0c\u6240\u4ee5\u6211\u5f88\u5feb\u5730\u6df1\u5165\uff0c\u5e76\u4e14\u6beb\u4e0d\u8d39\u529b\u5730\u5b66\u4f1a\u4e86\u8fd9\u95e8\u8bed\u8a00\u3002\u6211\u6ee1\u8db3\u4e8e\u6211\u7684\u82f9\u679c\u751f\u6001\u7cfb\u7edf\u5708\u3002React Native\u770b\u4e0a\u53bb\u53ea\u662f\u4e00\u4e2a\u5c0f\u5c0f\u7684\u4e50\u5b50\uff0c\u5728\u6211\u7684\u8111\u6d77\u4e2d\uff0c\u4e00\u5207\u539f\u751f\u5e94\u7528\u5fc5\u987b\u88ab \u539f\u751f \u5730\u5f00\u53d1\u3002\u5bf9\u6b63\u8981\u5f00\u59cb\u638c\u63e1 \u539f\u751f \u5f00\u53d1\u65b9\u5f0f\u7684\u6211\u6765\u8bf4\uff0c\u5b66\u4e60javascript\uff08\u6211\u5e76\u6ca1\u6709\u8fd9\u65b9\u9762\u7684\u7ecf\u9a8c\uff09\u548c\u4e00\u79cd\u51e0\u4e4e\u5168\u65b0\u7684\u6784\u5efaapp\u7684\u65b9\u5f0f\u7b80\u76f4\u662f\u8352\u5e9f\u65f6\u95f4\u3002
\u65f6\u95f4\u5feb\u8fdb\u5230\u51e0\u4e2a\u6708\u8fc7\u540e\uff0c\u6211\u53ef\u4ee5\u6253\u4fdd\u7968\u8bf4\uff0c\u6211\u518d\u4e5f\u4e0d\u4f1a\u4f7f\u7528Objective\uff0dC\u6216\u8005Swift\u6765\u5f00\u53d1iOS\u5e94\u7528\u4e86\u3002

\u6211\u4eec\u63a5\u624b\u4e86\u4e00\u4e2a\u65b0\u7684\u79fb\u52a8\u5e94\u7528\u5f00\u53d1\u9879\u76ee\uff0c\u6211\u5927\u6982\u7684\u770b\u4e86\u4e00\u4e0b\u8bbe\u8ba1\u548c\u9700\u6c42\u3002\u6b63\u5f53\u6211\u8981\u70b9\u5f00Xcode\u90a3\u6f02\u4eae\u7684\u84dd\u8272\u56fe\u6807\u65b0\u5efa\u4e00\u4e2a\u65b0\u7684\u5de5\u7a0b\u65f6\uff0c\u6211\u4eec\u7684\u4ea4\u4e92\u8bbe\u8ba1\u5e08\uff0cAdam\u8d70\u8fc7\u6765\u8bf4\uff0c\u201c\u6211\u4eec\u7528React Native\u6765\u505a\u8fd9\u4e2a\u4e1c\u897f\u5427\u3002\u201d
\u4ed6\u89e3\u91ca\u8bf4\uff0c\u8fd9\u4e2a\u9879\u76ee\u5408\u540c\u7684\u4e00\u90e8\u5206\u660e\u786e\u63d0\u53ca\u4e86\u8981\u7ed9\u8fd9\u4e2a\u5e94\u7528\u505a\u4e00\u4e2a\u5b89\u5353\u7248\u672c\u3002\u5c3d\u7ba1React Native\u5e76\u4e0d\u652f\u6301\u5b89\u5353\uff0c\u6211\u4eec\u77e5\u9053Facebook\u6b63\u79ef\u6781\u5730\u5728\u8fd9\u65b9\u9762\u7814\u7a76\u3002\u7406\u8bba\u4e0a\u6765\u8bf4\uff0c\u5982\u679c\u6211\u4eec\u7528RN\u6784\u5efa\u4e86\u8fd9\u4e2a\u5e94\u7528\u7684iOS\u7248\u672c\uff0c\u5f88\u591a\u90e8\u5206\u80fd\u591f\u76f4\u63a5\u5de5\u4f5c\u5728\u4ee5\u540e\u7684\u5b89\u5353\u7248\u672c\u4e0a\u3002
\u597d\u5427\uff0c\u6211\u5e76\u4e0d\u4e50\u610f\u3002\u6211\u89c9\u5f97\u6211\u5df2\u7ecf\u7ad9\u5728\u4e86iOS\u5f00\u53d1\u80fd\u529b\u7684\u9876\u5cf0\uff0c\u73b0\u5728\u5374\u8981\u6211\u628a\u8fd9\u4e00\u5207\u5168\u90e8\u4e22\u5f03\u3002\u5728\u4e0d\u53ef\u907f\u514d\u7684\u5b66\u4e60\u66f2\u7ebf\u9762\u524d\uff0c\u6211\u6000\u7591\u6211\u662f\u4e0d\u662f\u80fd\u591f\u53ca\u65f6\u5730\u53d1\u5e03\u4e00\u4e2a\u9ad8\u8d28\u91cf\u7684\u4ea7\u54c1\u3002\u4f46\u9664\u6b64\u4e4b\u5916\uff0c\u6211\u66f4\u52a0\u8d28\u7591RN\u662f\u5426\u6709\u80fd\u529b\u6210\u4ea7\u4e00\u4e2a\u9ad8\u8d28\u91cf\u7684\u4ea7\u54c1\u3002\u73b0\u5728\u770b\u6765\uff0c\u6211\u751a\u81f3\u6ca1\u6709\u89c9\u5f97\u8fd9\u6837\u7684\u8d28\u7591\u662f\u4e0d\u516c\u5e73\u7684\u3002\u5f53\u65f6RN\u4f5c\u4e3a\u4e00\u4e2aBeta\u7248\u672c\u521a\u88ab\u516c\u5e03\u4e0d\u4e45\uff0c\u6587\u6863\u6b20\u7f3a\uff0c\u5f00\u6e90\u5e93\u548c\u7ec4\u5efa\u7684\u6570\u91cf\u7a00\u5c11\uff0c\u6f14\u793a\u4ee3\u7801\u6216\u8005Stack Overflow\u4e0a\u7684\u53c2\u8003\u51e0\u4e4e\u6ca1\u6709\u3002
\u6211\u8fde\u770b\u90fd\u4e0d\u60f3\u770b\u5b83\u4e00\u773c\u3002\u4f46\u662f\u6211\u8fd9\u79cd\u95ed\u585e\u7684\u6001\u5ea6\u53ea\u4f1a\u5e26\u6765\u66f4\u591a\u7684\u4e0d\u826f\u540e\u679c\u3002\u6211\u7684\u7b2c\u4e00\u9053\u574e\u662f\u5b66\u4e60Flexbox\uff0cRN\u5236\u4f5cUI\u5e03\u5c40\u7684\u65b9\u5f0f\u3002\u4ece\u6700\u57fa\u7840\u7684\u754c\u9762\u6784\u5efa\u5668\u5f00\u59cb\uff0c\u7eaf\u7cb9\u4f7f\u7528\u4ee3\u7801\u6765\u5e03\u5c40UI\u51e0\u4e4e\u51fb\u6e83\u4e86\u6211\u7684\u81ea\u4fe1\u3002\u6211\u6323\u624e\u7740\u53bb\u6784\u5efa\u6700\u57fa\u7840\u7684\u89c6\u89c9\u6548\u679c\u3002
\u4f46\u4e0d\u4ec5\u4ec5\u662fUI\u2014\u2014\u4efb\u4f55\u4e8b\u60c5\u90fd\u53d8\u7684\u4e0d\u4e00\u6837\u3002\u8fd9\u5bf9\u4e8e\u6211\u662f\u6700\u5927\u7684\u6311\u6218\u3002
\u201d\u6bcf\u5f53\u6211\u6b62\u6b65\u4e0d\u524d\u6216\u8005\u4e0d\u7406\u89e3\u7684\u65f6\u5019\uff0c\u6211\u5c31\u544a\u8bc9\u81ea\u5df1\u201c\u5982\u679c\u7528Objective\uff0dC\u6211\u80fd\u591f\u5728\u4e94\u79d2\u949f\u4e4b\u5185\u89e3\u51b3\u5b83\u201d\u3002\u6bcf\u5f53\u6211\u53d1\u73b0\u4e86RN\u4e2d\u7684\u4e00\u4e2aBUG\uff08\u5e76\u4e14bug\u7684\u6570\u91cf\u975e\u5e38\u5927\uff09\uff0c\u6211\u5c31\u4f1a\u60f3\uff0c\u201coc\u4e2d\u6839\u672c\u4e0d\u4f1a\u6709\u8fd9\u79cdbug\uff0c\u6211\u4e3a\u5565\u4e00\u5b9a\u8981\u548cRN\u6597\u667a\u6597\u52c7\u5462\uff1f\u201d
\u6574\u6574\u4e24\u4e2a\u661f\u671f\uff0c\u6211\u90fd\u5728\u5de5\u4f5c\u4e2d\u75db\u82e6\u6323\u624e\u3002\u6211\u5bf9\u81ea\u5df1\u7684\u611f\u89c9\u4ece\u4e00\u4e2a\u6770\u51fa\u7684iOS\u5f00\u53d1\u8005\u53d8\u6210\u4e86\u4e00\u4e2a\u4ece\u672a\u5199\u8fc7\u4e00\u884c\u4ee3\u7801\u7684\u4eba\u3002\u8fd9\u5f88\u53d7\u632b\u6298\uff0c\u76f4\u5230\u6211\u82b1\u8d39\u4e86\u6574\u6574\u4e00\u4e2a\u793c\u62dc\u7406\u6e05\u4e86\u601d\u8def\u3002\u6211\u540e\u9000\u4e00\u6b65\uff0c\u8ba4\u8bc6\u5230Adam\u5bf9RN\u505a\u4e86\u8bb8\u591a\u7814\u7a76\u3002\u4f5c\u4e3a\u6211\u7684\u4ea4\u4e92\u77e5\u9053\uff0c\u6211\u4e0d\u5f97\u4e0d\u4fe1\u4efb\u4ed6\uff0c\u76f8\u4fe1\u4ed6\u6ca1\u6709\u628a\u6211\u9886\u5165\u4e00\u6761\u9519\u8bef\u7684\u9053\u8def\u3002\u6211\u53d1\u8a93\u6211\u8981\u5728\u5468\u4e00\u6295\u5165\u5de5\u4f5c\uff0c\u57cb\u5934\u82e6\u5e72\uff0c\u5047\u88c5Objective\uff0dC\u548cSwift\u4ece\u6765\u6ca1\u6709\u5b58\u5728\u8fc7\uff0c\u5e76\u89e3\u51b3\u8fd9\u4e2a\u9879\u76ee\u3002
\u5b66\u4f1a\u53bb\u559c\u6b22React
\u51e0\u5468\u4e4b\u524d\uff0c\u6211\u4eec\u5411App Store\u63d0\u4f9b\u4e86\u7b2c\u4e00\u4e2aReact Native\u5e94\u7528\u3002\u5bf9\u4e8e\u5e94\u7528\u7684\u6700\u7ec8\u8868\u73b0\u7ed3\u679c\u6211\u771f\u7684\u975e\u5e38\u81ea\u8c6a\uff0c\u5e76\u4e14\u6211\u8feb\u4e0d\u53ca\u5f85\u7684\u8981\u5f00\u59cb\u6784\u5efa\u4e0b\u4e00\u4e2a\u9879\u76ee\u4e86\u3002\u5728\u4ec5\u4ec5\u4e00\u4e2a\u6708\u591a\u4e00\u70b9\u7684\u65f6\u95f4\u91cc\uff0c\u6211\u5b8c\u5168\u8e0f\u4e0a\u4e86RN\u7684\u8d3c\u8239\uff0c\u662f\u4ec0\u4e48\u6539\u53d8\u4e86\u6211\u7684\u60f3\u6cd5\u5462\uff1f
React \u8303\u4f8b
\u5728React\u4e2d\uff0c\u6240\u6709UI\u7684\u7ec4\u4ef6\u90fd\u88ab\u653e\u7f6e\u5728render\uff08\uff09\u65b9\u6cd5\u4e2d\uff0c\u5e76\u4e14\u88abstate\u72b6\u6001\u63a7\u5236\u3002\u4f60\u7684render\uff08\uff09\u65b9\u6cd5\u5b9a\u4e49\u4e86UI\u5728\u5404\u79cd\u72b6\u6001\u662f\u5982\u4f55\u5c55\u73b0\u7684\u3002\u5f53\u8c03\u7528setState()\u7684\u65f6\u5019\uff0cReact\u4f1a\u627e\u5230\u9700\u8981\u6539\u53d8\u7684\u90e8\u5206\u5e76\u66ff\u4f60\u4fee\u6539\u3002\u60f3\u8c61\u4e00\u4e2a\u7b80\u5355\u7684\u89c6\u56fe\uff0c\u62e5\u6709\u4e00\u4e2a\u201cHello World\u201d\u6807\u7b7e\u548c\u6309\u94ae\u3002\u6bcf\u70b9\u51fb\u4e00\u4e0b\u6309\u94ae\uff0c\u6807\u7b7e\u4f1a\u5728\u201cHello World\u201d\u548c\u201cGoodbye World\u201d\u4e4b\u95f4\u5207\u6362\u3002\u5728Objective\uff0dC\u4e2d\uff0c\u6211\u5728\u6309\u94ae\u7684\u53e5\u67c4\u4e2d\u9700\u8981\u4e00\u4e9b\u96be\u582a\u7684if\u58f0\u660e\uff0c\u5c31\u50cf\u4e0b\u9762\u4e00\u6837\u3002
if([label.text isEqual:@\u201dHelloWorld\u201d]){
label.text =@\u201dGoodbyeWorld\u201d;
}else{
label.text =@\u201dHelloWorld\u201d;
}
\u8fd9\u6837\u5f88\u6709\u7528\uff0c\u4f46\u662f\u8fd9\u79cdUI\u4ee3\u7801\u548c\u6211\u7b2c\u4e00\u6b21\u521b\u5efa\u8fd9\u4e2a\u6807\u7b7e\u7684\u5730\u65b9\uff08\u53ef\u80fd\u5728\u4ee3\u7801\u4e2d\uff0c\u4e5f\u53ef\u80fd\u5728\u754c\u9762\u6784\u5efa\u5668\u91cc\uff09\u5b8c\u5168\u8131\u8282\u3002\u5728React\u4e2d\uff0c\u6211\u4eec\u4f1a\u5728state\u72b6\u6001\u4e2d\u5b9a\u4e49\u4e00\u4e2abuttonClicked\u7684bool\u53d8\u91cf\uff0c\u5728render()\u51fd\u6570\u4e2d\uff0c\u6807\u7b7e\u770b\u8d77\u6765\u4f1a\u662f\u8fd9\u6837\u7684:

{this.state.buttonClicked ? \u2018Hello World\u2019 : \u2018Goodbye World\u2019}
\u5e76\u4e14\u6211\u4eec\u7684\u6309\u94ae\u53e5\u67c4\u4e5f\u4f1a\u975e\u5e38\u7b80\u5355
this.setState({buttonClicked:!this.state.buttonClicked});
\u6240\u6709\u548c\u53ef\u89c6\u5316\u76f8\u5173\u7684\u4ee3\u7801\u90fd\u5728\u540c\u4e00\u5730\u65b9\uff0c\u5e76\u4e14\u7531\u72b6\u6001\u63a7\u5236\u4e00\u5207\u3002\u8fd9\u4f7f\u5f97\u7406\u89e3\u548c\u4fee\u590d\u8fd9\u6bb5\u4ee3\u7801\u53d8\u7684\u975e\u5e38\u5bb9\u6613\u3002
Flexbox
\u8fd9\u5c31\u662f\u6211\u4e00\u5f00\u59cb\u975e\u5e38\u75db\u6068\u7684UI\u5e03\u5c40\u5de5\u5177\uff0c\u73b0\u5728\u53d8\u6210\u4e86RN\u4e2d\u6211\u6700\u559c\u6b22\u7684\u4e8b\u7269\u4e4b\u4e00\u3002\u6211\u627f\u8ba4\u4e00\u5f00\u59cb\u975e\u5e38\u96be\u4ee5\u638c\u63e1\uff0c\u4f46\u4e00\u65e6\u4f60\u5f00\u59cb\u4f7f\u7528\uff0c\u5b83\u628a \u4e3a\u591a\u79cd\u4e0d\u540c\u5c3a\u5bf8\u5c4f\u5e55\u6784\u5efaUI\u8fd9\u4ef6\u4e8b \u53d8\u7684\u673a\u5668\u5feb\u901f\u548c\u7b80\u5355\u3002\u6211\u66fe\u7ecf\u5bf9Xcode\u4e2d\u7684\u53ef\u89c6\u5316\u754c\u9762\u7f16\u8f91\u5668\u5341\u5206\u70ed\u8877\uff0c\u76f8\u6bd4\u4e8eFlexbox\uff0c\u5b83\u7684\u81ea\u52a8\u5e03\u5c40\u8fd8\u662f\u56fd\u8bed\u590d\u6742\u3002Flexbox\u4f7f\u7528\u7684CSS\u5f0f\u6837\u5f0f\u4f7f\u5f97\u6837\u5f0f\u91cd\u7528\u53d8\u7684\u548c\u590d\u5236\u7c98\u8d34\u4e00\u6837\u7b80\u5355\u3002\u5176\u4e2d\u6700\u68d2\u7684\u4e8b\u83ab\u8fc7\u4e8e\u5141\u8bb8\u4f60\u5728\u4e00\u77ac\u95f4\u5c06\u6837\u5f0f\u503c\u6539\u53d8\u5230\u5b8c\u7f8e\u3002
Live/Hot Reload
\u6ca1\u9519\uff0c\u60f3\u770b\u770b\u6309\u94ae\u53f3\u79fb5\u50cf\u7d20\u7684\u6837\u5b50\u5c31\u548ccommand\uff0bs\u4e00\u6837\u7b80\u5355\u3002React Native\u80fd\u591f\u88ab\u8bbe\u7f6e\u4e3a\u5728iPhone\u6a21\u62df\u5668\u4e2d\u81ea\u52a8\u91cd\u7ed8\u5f53\u524d\u753b\u9762\u800c\u4e0d\u91cd\u5efaXcode\u5de5\u7a0b\u3002\u8fd9\u975e\u5e38\u5389\u5bb3\u56e0\u4e3a\u4f60\u4e0d\u4ec5\u53ef\u4ee5\u901a\u8fc7\u907f\u514d\u91cd\u65b0\u7f16\u8bd1\u513f\u8282\u7701\u65f6\u95f4\uff0c\u4f60\u8fd8\u80fd\u591f\u8c03\u6574\u4e00\u4e2a\u6df1\u5ea6\u5d4c\u5957\u5728\u5e94\u7528\u4e2d\u7684\u754c\u9762\uff0c\u8c03\u6574UI\u800c\u4e0d\u7528\u56de\u5230\u6700\u521d\u7684\u754c\u9762\u3002
Android
\u73b0\u5728\u4f9d\u65e7\u6ca1\u6709\u53d1\u5e03\uff0c\u4f46\u5c31\u5feb\u4e86\u2014\u2014\u8fd9\u4e00\u5b9a\u4f1a\u975e\u5e38\u795e\u5947\u3002\u5728\u6700\u521d\u6211\u5bf9\u4e8eReactNative\u72b9\u8c6b\u4e0d\u51b3\u662f\u56e0\u4e3a\u6211\u5df2\u7ecf\u4e60\u60ef\u4e8e\u505a\u539f\u751f\u7684iOS\u5f00\u53d1\u3002\u5bf9\u6b64\u6211\u4ece\u6ca1\u6709\u8fc7\u4efb\u4f55\u7684\u62b1\u6028\u3002\u4f46\u662f\u6211\u4e5f\u505a\u8fc7\u539f\u751f\u7684\u5b89\u5353\u5f00\u53d1\uff0c\u8fd9\u5e76\u4e0d\u8ba9\u4eba\u5f00\u5fc3\u3002React Native\u5728\u5b89\u5353\u4e0a\u4f1a\u53d8\u7684\u5f88\u7626\u6b22\u8fce\uff0c\u540c\u65f6\u6211\u4e5f\u5728\u671f\u5f85\u5b83\u7684\u53d1\u5e03\u3002\u8fd9\u4f1a\u6539\u53d8\u79fb\u52a8\u5e94\u7528\u5f00\u53d1\u7684\u73b0\u72b6\uff0c\u901a\u8fc7\u4f7f\u7528\u76f8\u540c\u7684\u4ee3\u7801\u6765\u90e8\u7f72\u4e24\u4e2a\u5e73\u53f0\u7684\u5e94\u7528\u3002
\u56de\u987e
\u60f3\u5ff5 Xcode
\u6211\u8fd8\u662f\u4f1a\u60f3\u5ff5Xcode\uff0c\u6216\u8005\u8bf4\u662f\u4e00\u4e2aIDE\u7f16\u8f91\u5668\u3002\u6211\u5df2\u7ecf\u6709\u4e86\u4e00\u4e2a\u5f88\u597d\u7684RN\u5f00\u53d1\u8bbe\u7f6e\uff0c\u4f46\u8fd9\u5e76\u4e0d\u5bb9\u6613\uff0cSublime Text\u548c\u4e00\u5927\u5806\u7684\u63d2\u4ef6\u8ba9\u6211\u6709\u4e86\u8bed\u6cd5\u9ad8\u4eae\u3002sublime\u80fd\u591f\u5b8c\u6210\u540c\u4e00\u4e2a\u6587\u4ef6\u4e2d\u57fa\u4e8e\u53d8\u91cf\u7684\u81ea\u52a8\u8865\u5168\uff0c\u4f46\u59cb\u7ec8\u5c11\u4e86\u4e00\u4e9bXcode\u81ea\u52a8\u8865\u5168\u7684\u7a33\u5065\u6027\u3002\u6211\u8fd8\u662f\u4e0d\u5f97\u4e0d\u4e00\u76f4\u67e5\u8be2\u5f00\u53d1\u8005\u6587\u6863\u505a\u53c2\u8003\u3002
\u5c0f\u7f3a\u70b9\uff0c\u6bd4\u5982\u952e\u5165React.PropTypes.f IDE\u5e76\u4e0d\u4f1a\u544a\u8bc9\u6211\u6211\u5230\u5e95\u5728\u627efunc\u8fd8\u662ffunction\uff0c\u8fd9\u5f88\u8ba9\u4eba\u56f0\u60d1\u3002\u6211\u4e5f\u6000\u5ff5Xcode\u7684\u7248\u672c\u63a7\u5236\u2014\u2014\u5141\u8bb8\u6211\u4e00\u4e00\u6bd4\u8f83\u6211\u4e0a\u4e00\u6b21git\u63d0\u4ea4\u7684\u7248\u672c\u548c\u73b0\u5728\u7684\u7248\u672c\uff0c\u751a\u81f3\u8fd8\u5141\u8bb8\u6211\u57fa\u4e8e\u884c\u64a4\u9500\u4e00\u4e9b\u7279\u522b\u7684\u6539\u52a8\u3002\u6211\u610f\u8bc6\u5230\u7b2c\u4e09\u65b9\u7a0b\u5e8f\u80fd\u591f\u5e2e\u52a9\u6211\u5b8c\u6210\u8fd9\u4e9b\uff0c\u4f46\u662f\u5bf9IDE\u6765\u8bf4\u6700\u68d2\u7684\u4e8b\u60c5\u5c31\u662f\u5c06\u8fd9\u4e9b\u56ca\u62ec\u5230\u4e00\u4e2a\u5305\u4e2d\u3002\uff08\u8bd1\u8005\u4f7f\u7528VSCode\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e9b\u95ee\u9898\uff09
\u4e3a\u4e86\u8fd0\u884cRN\u9879\u76ee\uff0c\u6211\u9700\u8981\u7ec8\u7aef\u8fd0\u884cnpm\uff0cChrome\u7528\u6765debug\uff0csublime\u6765\u7f16\u8f91\u4ee3\u7801\uff0c\u6700\u7ec8\u8fd8\u9700\u8981Xcode\u6765\u8fd0\u884c\u8fd9\u4e2a\u9879\u76ee\u5e76\u6253\u5f00\u6a21\u62df\u5668\u3002\u5728\u5927\u9879\u76ee\u4e2d\uff0c\u8fd9\u4e9b\u90fd\u662f\u7ec6\u5c0f\u7684\u62b1\u6028\uff0c\u4f46\u662f\u5f53\u6211\u9762\u5bf9RN\u7684\u65f6\u5019\u8fd9\u4f9d\u65e7\u662f\u7f3a\u70b9\u3002\u5bf9\u4e8eNuclide\uff08Facebook\u7684\u65b0IDE\uff09\u6211\u62b1\u6709\u5f88\u9ad8\u7684\u671f\u671b\uff0c\u5e0c\u671b\u5b83\u80fd\u7ed3\u675f\u6240\u6709\u7684\u8fd9\u4e9b\u7f3a\u70b9\u3002
\u6865\u63a5
Facebook\u8fd8\u6ca1\u6709\u4e5f\u4e0d\u4f1a\u53bb\u63d0\u4f9b\u6240\u6709iOS\u8f6c\u5411React Native\u7684API\uff0c\u6240\u4ee5\u5bf9\u4e8e\u90a3\u4e9b\u7f3a\u5931\u7684\u7247\u6bb5\u4ed6\u4eec\u63d0\u4f9b\u4e86\u6865\u63a5js\u7684\u65b9\u6cd5\u3002\u5f53\u6211\u7b2c\u4e00\u6b21\u6df1\u5165RN\u7684\u65f6\u5019\uff0c\u8fd9\u65b9\u9762\u7684\u6587\u6863\u975e\u5e38\u7684\u7cdf\u7cd5\u3002\u6bcf\u5f53\u6211\u610f\u8bc6\u5230\u6211\u9700\u8981\u8fde\u63a5\u67d0\u4e9b\u4e8b\u7269\u7684\u65f6\u5019\uff0c\u6211\u5dee\u70b9\u5c31\u5bf9RN\u653e\u5f03\u4e86\uff0c\u56e0\u4e3a\u8fd9\u4e9b\u4e8b\u60c5\u65e9\u5c31\u80fd\u591f\u5728Objective\uff0dC\u4e2d\u6b63\u5e38\u8fd0\u4f5c\u3002\u4f46\u662f\u5f53\u5979\u4eec\u66f4\u52a0\u8be6\u7ec6\u5730\u89e3\u91ca\u4e86\u6865\u63a5\u8fc7\u7a0b\uff0c\u63d0\u4f9b\u4f18\u79c0\u7684\u5b9e\u4f8b\u4e4b\u540e\uff0c\u8fd9\u5c31\u65e0\u6240\u60e7\u6015\u4e86\u3002\u5b83\u4ecd\u7136\u662f\u4e00\u4e2a\u9ebb\u70e6\uff0c\u4f46\u662f\u6211\u80fd\u591f\u9884\u89c1\u5230\u5f00\u6e90\u793e\u533a\u548cnom\u4e0a\u4f1a\u6709\u6240\u6709\u7684\u6865\u63a5\u65b9\u6848\u3002\u4e8b\u5b9e\u4e0a\uff0c\u5927\u591a\u6570\u7684iOSAPI\u5df2\u7ecf\u5b58\u5728\u4e86\u3002
\u6f0f\u6d1e\uff0c\u6587\u6863\uff0c\u5f00\u6e90\u793e\u533a
\u5927\u6982\u6240\u6709\u6211\u6700\u521d\u5173\u4e8eRN\u7684\u62b1\u6028\u73b0\u5728\u90fd\u5df2\u7ecf\u6d88\u5931\u6b86\u5c3d\uff0c\u5982\u679c\u6211\u4ece\u4eca\u5929\u5f00\u59cb\u5b66\u4e60\u5b83\u7684\u8bdd\u3002\u6f0f\u6d1e\u6bcf\u5929\u90fd\u5728\u88ab\u4fee\u590d\uff0c\u65b0\u7248\u672c\u6bcf\u4e00\u5468\u90fd\u5728\u8fed\u4ee3\u3002\u6587\u6863\u8fd8\u9700\u8981\u52a0\u628a\u52b2\uff0c\u4f46\u6bd4\u4ee5\u524d\u597d\u591a\u4e86\u3002Facebook\u548c\u5f00\u6e90\u793e\u533a\u5bf9\u4e8e\u7814\u53d1\u8fd9\u4e2a\u6846\u67b6\u53d8\u7684\u5341\u5206\u4e25\u8c28\u3002\u4eba\u4eec\u5f00\u59cb\u805a\u96c6\u5728Github\u548cStack Overflow\u4e0a\u63a2\u8ba8\u5b83\u3002\u5982\u679c\u4f60\u662f\u4e00\u4e2a\u6b63\u5728\u8003\u8651\u5c1d\u8bd5RN\u7684iOS\u5f00\u53d1\u8005\uff0c\u4f60\u8981\u77e5\u9053\u4f60\u4e0d\u662f\u4e00\u4e2a\u4eba\u5728\u6218\u6597\u3002RN\u975e\u5e38\u68d2\uff0c\u4f60\u5e94\u8be5\u5e26\u7740\u5f00\u653e\u7684\u6001\u5ea6\u62e5\u62b1\u4ed6\u3002\u4e0d\u8981\u50cf\u6211\u4e00\u6837\u5427\u81ea\u5df1\u5c40\u9650\u5728\u6e29\u5ba4\u91cc\u3002
\u8d70\u51fa\u6e29\u5ba4\uff0c\u4e16\u754c\u624d\u521a\u5f00\u59cb\u3002

react-native用react进行原生app开发的框架,让广大开发者使用js和react开发应用,提倡组件化开发。优点提供一个个封装好的组件让开发者使用,也可以相关嵌套形成新的组件。可以维护多种平台(Web,Android和IOS)的同一份逻辑核心代码来创建原生app。和H5类似,跨平台、低成本开发、开发速度快、动态发布、一套类似代码维护三个平台。缺点组件不全,第三方组件也不全,遇到某些特殊功能,需要花大力气写;性能方面也无法媲美原生,还是有一些损耗,特别是交换大数据时;IOS版本略好,androi发展较慢;ios和android代码并非通用,有可能需要维护两套代码或者在代码中做一些判断;开发人员还是需要会原生开发,不然自定义组件无法编码;

我就用react native做了个游戏,你可以在苹果app store 搜 studious bear 中文名叫 学霸熊,下载来看看效果。
我用的是GitHub上一个澳大利亚人写的游戏引擎,叫react-native-game-engine,在我的游戏的credits里面有标注,我和他交流过,一个挺不错的人。里面用的物理碰撞模型则来自matter-js,你也可以上网搜一下,很多h5网页游戏也经常用到。
然后我来谈谈我的看法吧,怎么说呢,只能适用于某些动画以及交互和响应简单的游戏吧。例如我做的这个游戏,我感觉我已经在性能允许的范围内,把我想实现的东西以及用户体验的平衡发挥到极致了。感觉就是为了照顾性能制肘太多了,场景一复杂有时会有掉帧现象,发热有点严重,动画不能做的太多,很多我想实现的东西没办法去实现,做不了进一步深入的东西。还有就是开发的时候,如果是做静态的画面,勉强用debug模式还行,要是做动态的画面尤其是你游戏做复杂后,debug模式根本就跑不起来,卡得要死,我用的是iphone 6s真机,你用模拟器的话就不用再想了(我用的是macbook air开发,机器好可能会快很多),所以很多时候我只能发布release版本测试,尤其一关关卡做完后,慢慢调整,改一次就发布一次,因此导致我的开发时间很长,严重影响效率。但是发布release版本测试还是挺流畅的,闪退情况也很少发生。安卓机我想体验的话简直会是灾难,尤其是低端机,所以这个游戏我也没再开发安卓版本。

扩展阅读:erolabs游戏下载入口 ... react native入门教程 ... react native onedrive ... react native cli ... react native收费吗 ... 新版react native ... react native webview ... react native与小程序 ... android studio ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网