构建 F8 2016 App 附录 I：本地运行 App
hjcaxa
8年前
<p>上一篇：<a href="http://www.open-open.com/lib/view/open1461568900024.html">构建 F8 2016 App （四）：测试</a></p> <p>当你从<a href="/misc/goto?guid=4959671526759547571">苹果商店</a>或者<a href="/misc/goto?guid=4959671526759547571">谷歌 Play</a> 上下载了 F8 App，并可以在移动设备上运行它以后，阅读这些教程的同时你也会希望在本地运行 App 玩一玩。</p> <p>这篇简短的文章，将指导你如何在 OSX 本地搭建和运行源代码（安卓版 React Native <a href="/misc/goto?guid=4959671526856745669">可以支持</a>在 Windows 和 Linux 运行）。</p> <h2>要求</h2> <p>在开始之前，你需要安装一些必要的东西：</p> <ol> <li><a href="/misc/goto?guid=4958872159930900776">React Native</a> (根据 iOS 和 Android 的引导说明)</li> <li><a href="/misc/goto?guid=4958539574664641318">CocoaPods</a> 1.0+ (仅 iOS)</li> <li><a href="/misc/goto?guid=4958863939164175213">MongoDB</a> (需要在本地运行 Parse Server)</li> </ol> <h2>搭建</h2> <h3>1. 克隆仓库</h3> <pre> <code>$ git clone https://github.com/fbsamples/f8app.git $ cd f8app </code></pre> <h3>2. 安装依赖（npm v3+）</h3> <pre> <code>$ npm install $ (cd ios; pod install) # only for iOS version </code></pre> <h3>3. 确认 MongoDB 运行正常</h3> <pre> <code>$ lsof -iTCP:27017 -sTCP:LISTEN </code></pre> <p>或者使用外部 MongoDB 服务，设置 <code>DATABASE_URI</code></p> <pre> <code>$ export DATABASE_URI=mongodb://example-mongo-hosting.com:1337/my-awesome-database </code></pre> <h3>4. 启动 Parse/GraphQL 服务</h3> <pre> <code>$ npm start </code></pre> <h3>5. 导入样本数据（本地的 Parse 服务已经运行）</h3> <pre> <code>$ npm run import-data </code></pre> <p>访问以下地址确认一切正常运行：</p> <ul> <li>Parse Dashboard: http://localhost:8080/dashboard</li> <li>GraphiQL: http://localhost:8080/graphql</li> </ul> <p><a href="/misc/goto?guid=4959671527019540206"><img alt="" src="https://simg.open-open.com/show/3b70003315930f5f1d3fdcce81df6f49.png"></a></p> <h3>6. 运行 Android 版 App</h3> <pre> <code>$ react-native run-android $ adb reverse tcp:8081 tcp:8081 # required to ensure the Android app can $ adb reverse tcp:8080 tcp:8080 # access the Packager and GraphQL server </code></pre> <h3>7. 运行 iOS 版 App</h3> <pre> <code>$ react-native run-ios</code></pre> <p>下一篇：<a href="http://www.open-open.com/lib/view/open1461569458137.html">构建 F8 2016 App 附录 II 使用 Relay 和 GraphQL</a></p> <p>来自：<a href="/misc/goto?guid=4959671527116182726">pockry</a></p>