构建 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>