一个上架了的React Native项目实战总结
MonCasanova
7年前
<p>喜欢逛GitHub的小伙伴都知道，它有个查看最热项目的功能叫 treding ，但这个功能只能在网页上查看，</p> <p>而且在手机上浏览显示效果很不友好，而我想在地铁上，餐厅，路上等空余的时间使用它，所以我需要一款带有这个功能的App，</p> <p>不仅于此，我还想要在这款App上查询GitHub上我所喜欢的项目，甚至在手机没网的时候也能看到，而且我想要我的iOS和Android手机都能使用这款App，</p> <p>于是 GitHub Popular 便诞生了。</p> <p>这个项目满足了我如下3方面的需求：</p> <ol> <li>在手机App上也可以使用GitHub 的 <a href="/misc/goto?guid=4958822644988629774" rel="nofollow,noindex">treding</a> 功能来查看最热最火的开源项目。</li> <li>在手机App上也可以搜索GitHub上的开源项目，并且可以进行查看、收藏、分享等操作。</li> <li>可以订阅我所喜欢的标签或语言，让感兴趣的热门项目一个不漏。</li> </ol> <p style="text-align: center;"><img src="https://simg.open-open.com/show/4641dce874e67612bfc0a06dda610e0d.png"></p> <p style="text-align: center;">githubpupular.png</p> <h2><strong>开发环境及工具</strong></h2> <h3>环境：</h3> <ul> <li> <p>OSX:10.11.6</p> </li> <li> <p>Node.js:6.3.1</p> </li> <li> <p>react-native:0.32.0</p> </li> </ul> <h3><strong>工具：</strong></h3> <ul> <li> <p>Git</p> </li> <li> <p>WebStorm</p> </li> <li> <p>AndroidStudio</p> </li> <li> <p>Xcode</p> </li> </ul> <h2><strong>所用技术与第三方库</strong></h2> <h3><strong>所用技术</strong></h3> <ul> <li> <p>ES5/ES6</p> </li> <li> <p>React</p> </li> <li> <p>Flexbox</p> </li> <li> <p>AsyncStorage</p> </li> <li> <p>fetch api</p> </li> <li> <p>Native Modules</p> </li> </ul> <h3><strong>第三方工具</strong></h3> <ul> <li>react-native-check-box</li> <li>react-native-easy-toast</li> <li>react-native-splash-screen</li> <li>react-native-htmlview</li> <li>react-native-parallax-scroll-view</li> <li>react-native-scrollable-tab-view</li> <li>react-native-sortable-listview</li> <li>react-native-tab-navigator</li> </ul> <h2><strong>功能流程图</strong></h2> <p style="text-align: center;"><img src="https://simg.open-open.com/show/3605a629178702cd25481c80a9a19878.png"></p> <p style="text-align: center;">GitHub Popular-功能结构图</p> <h2><strong>总结</strong></h2> <p>此项目是基于目前比较火的React Native技术架构的，也用到一些Android和iOS技术，其中Android、iOS两端代码复用率有90%之多，该项目占据我不少业余时间，不过总算研发完成，并成功上架。在此过程中填了不少的坑，包括GitHub没有开放 treding 的Api，需要自己动手实现它，以及自定义主题等等，后期有时间会整理出来分享给大家。</p> <p> </p> <p> </p>