注意：这是一系列持续不断的博客文章，详细介绍了我们在10天内如何制作iOS和Android移动应用。 当其他文章发表时，请随时 在这里或在 Twitter上 关注我， 以获取更新。
尚未完成的清单：
- 使用React Native在10天内构建移动应用
- 使用Express和Google Cloud SQL构建Node API
- Easy React本机身份验证：Auth0
- React Native：条形码扫描和自动完成
- 将AirBnB的Lottie动画与React Native一起使用
- 将React Native App部署到App Store和Google Play
我和我的朋友Connor Maddox共同构建了这个应用程序。 他是波音公司的嵌入式系统工程师，我领导房地产投资公司SaaS公司Realeflow的产品团队。 我们不是Javascript向导。 也就是说，如果您发现有待改进的地方，请随时告诉我们！
我们*实际上*在10天内就构建了该应用程序。 它差点杀死了我们。 我们必须在短时间内学到很多东西，但是我们做得非常好。 我主要负责iOS方面，而Connor负责Android部分。 大量的比萨饼和啤酒被消耗掉了（Leinenkugel葡萄柚的香is就是生命！）
您可以在此处找到适用于iOS的应用程序，也可以在此处找到适用于Android的应用程序。 快速说明：App Store / Play商店中提供的应用不是10天版本。 我们一直在推动更新，并试图使产品更好。
这是我们在十天启动时的外观：
我希望我们可以说我们是正式开始的，并有关于最终结果的Sketch设计，但是说实话，该项目是从一整夜的混乱中演变而来的。 我们甚至没有决定将目标定在十天之内，直到第三天。 我绝对建议在开始构建应用程序之前，至少要有一些餐巾纸草图。 它将节省我们很多时间。
首先，请仔细阅读React Native的“入门”文档。 您需要下载一些东西，例如Node。
现在，我不想立即提出争议，但是当您开始创建React Native项目时，您有一个决策点。 您可以：
A.使用Create React Native App
B.从CLI构建React Native。 本质上， react-native init AwesomeProject
这两个路径之间的差异在“入门”文档中有些混乱。 归结为是否要使用Expo构建React Native项目。 世博会是一个工具链，它被烘焙到create-react-native-app库中，它消除了前面的一些障碍，但以我们自己的经验，在后端增加了障碍。
我们最初是在Expo路线上开始构建该项目的，但是第一天之后，我们意识到我们想实现某些不支持或者仅通过Expo支持Alpha的库。 此外，我们选择了全新的安装，而不是尽量避免安装然后弹出。 对不起所有世博爱好者。
安装完成后，您应该具有以下文件：
首先，我建议您做一些整理工作：
- 在根目录中添加一个名为“ app”的文件夹
- 将
App.js文件移至app的根目录 - 更新
index.js导入语句以import App from ./app/App.js - 在
app内创建文件夹
assets -我们在此目录中有两个文件夹，分别是图像和动画。
components -在这里放置所有共享组件。
config -我们在colors.js文件中设置了应用程序的配色方案，以保持一致。
screens -这些是我们的主要视图。
在我们的应用中，我们有五个主屏幕
- 书柜
- 探索
- 新增书籍
- 清单
- 轮廓
首先，我们将使用占位符文本将其存根：
设置完这五个屏幕后，就可以创建导航的第一部分-屏幕底部的标签导航。 我们将使用React Navigation库。 我们将router.js文件添加到我们app文件夹的根目录，然后安装几个库：
-
npm install react-navigation --save - React Native Elements的图标等。 请按照此处的react-native-elements安装说明进行操作
现在，您应该具有如下所示的内容：
现在我们已经准备就绪，有趣的部分开始了。 我们将为以后的博客文章保存动态数据部分，并使用静态数据对象构建书籍列表。 对于我们最初的书架展示，我们只需要几个数据点：id，标题，作者和缩略图。
注意：请记住，您可以并且应该将所有可能的内容分解为可共享的组件。 由于是菜鸟和时间，我们在这方面并不是最好的。 事实上，我们已经学到了很多重构方法。
我们将使用React Native的FlatList组件。 这是一个非常整洁的组件，可以直接使用来循环显示数据。 之所以如此整洁，是因为它内置了很多功能，例如：滚动加载，拉动刷新等。
我们的bookcase.js文件将如下所示：
如果您关注的话，您会注意到我们需要添加另一个文件BookcaseItem.js ，这是我们的_renderItem函数呈现的内容。 该文件如下所示：
凉。 现在我们有了书：
但是，我们并不是将这个应用程序构建为仅列出书籍。 我们希望能够编辑这些书，对其进行评分并编写笔记。 为此，我们需要在某人点击一本书时添加一个click事件，为编辑区域添加一个新屏幕，并为我们的路由器添加一条新路线。
我们将TouchableOpacity和onPress函数添加到BookcaseItem.js文件中。 它看起来像这样：
暂时，我们将添加一个EditBook.js到我们的app/screens目录中，其中包含一些裸露的占位符文本和一个后退按钮。 至此，我们只是在验证它是否有效。
在router.js文件中，我们将添加一个StackNavigator。 我将TabNavigator形象化，就像五张水平放置的桌子上的扑克牌一样。 添加StackNavigator时，实际上是在这五张卡之一的顶部放置卡，从而增加了深度。
现在我们有了一个简单的书籍清单，我们可以单击它，查看编辑页面，然后返回清单。 ！ 这是一个重要的理解模式，因为它与我们的“浏览和阅读列表”区域使用的模式相同。
这仅仅是开始，但我们已经设置了应用程序的开始，并且我们已经准备好真正开始添加功能。 请继续关注，我们将继续发布更新并增加演练。 同样，如果您有任何建议或想法，请打我。 我们希望获得一些反馈！
