学习React Native：简介，导航，数据存储和Native模块
这是面向初学者的React Native系列的一部分，本文是针对该系列的第一部分。 假设您已经知道React。
学习任何东西的最好方法就是做到！
作为技术爱好者，我总是尝试寻找学习新工具和技术的机会。 因此，当我的兄弟想要本机IOS应用程序时，这是学习著名的React Native的绝佳机会。
在创建该应用程序时，我了解了不同的组件，例如导航，存储数据，调用API等。每个组件都很重要，我将对其进行解释。 可以使用这些组件创建任何应用程序。
我们要涵盖什么？
创建一个本机应用QR扫描程序，该程序扫描QR码，将其存储在本地存储中，最后使它漂亮。 这将是一个漫长的教程，因此请为自己喝杯咖啡并坐好。 大概需要大约1：30–2个小时，但是…
您可以将输出显示给同事，并为此感到自豪。
源代码
该应用程序代码可在GitHub上获得 。 您可以通过检出特定分支来根据应用程序版本获取应用程序代码。 例如，要获取v0.3.0应用程序代码，
git clone https://github.com/drex44/QR-Scanner.git
git checkout v0.3.0
该代码具有三个分支，
- 母版：QR扫描仪v1.0.0的代码
- v0.3.0：QR扫描仪v0.3.0的代码
- v0.4.0：QR扫描仪v0.4.0的代码
讲解
我们将以增量模型设计应用程序。 我们将在每次迭代中添加新功能。 我鼓励您复制代码，然后再看一下以了解每一行的意义。 如果您有任何疑问，请在下面评论。 这将需要一些时间，但是我一定会回答您所有的问题。
愿力量与您同在，让黑客开始吧！
v0.1.0
目标：Hello World App，使用UI库，测试您的App
我们可以使用两个著名的工具链来创建我们的react native应用程序。 一个是expo，另一个是react-native 。
正如官方文档所说，
Expo是围绕React Native构建的免费开源工具链，可帮助您使用JavaScript和React构建本地iOS和Android项目。
Expo提供了一个共享的本机运行时，因此您无需编写本机代码，而是专注于用JavaScript编写React应用程序。
如果要使用任何本机模块，例如摄像机，定位服务等，则必须使用npm模块，该模块将包含一些平台特定的本机代码，然后必须将其链接。 您甚至可以通过编写本机代码来创建自己的本机模块，但这将不是纯JavaScript。
使用expo工具链的主要好处是它们维护了本机模块，因此我们可以专注于构建应用程序。 升级和维护应用程序也非常容易。 但是与此同时，您对应用程序的控制权要少于react-native-cli。
因此，当我们想快速创建应用程序时，请使用expo。 一旦应用程序变大，便可以执行弹出（类似于CRA弹出），它将转换为react-native工具链。
现在，让我们开始编码并创建我们的第一个应用程序。 运行以下命令以安装expo-cli，然后使用它创建一个新项目。 它将要求您选择一个模板，然后选择“空白”。
npm install -g expo-cli
打开您喜欢的IDE并编辑App.js。 这是您在应用程序中的主要入口点。 我们不能在React Native应用程序中使用HTML元素。 我们必须使用React Native组件。 将以下代码粘贴到您的App.js中，
App.js
我们刚刚将“文本”组件内的文本更改为“ Hello World！”。 “查看”组件是React本机应用程序的构建块。 它的用法与Web应用程序中div元素的用法相同。 现在该运行该应用程序了。 世博有IOS / Android客户端应用程序 。 您将需要expo客户端来运行应用程序，或者如果您更喜欢使用模拟器，则必须为android设置android studio，为IOS设置xcode。 使用expo客户端速度很快，我们可以在几分钟内上手，因此我们将使用expo客户端。 将其下载到您的设备上，然后在项目根目录下的以下命令中运行，
npm start
现在，在移动设备上打开expo客户端并扫描QR码。 确保您的计算机和移动设备都在同一网络上。 如果不是，则可以在计算机和移动设备中创建并登录到您的博览会帐户，以通过Internet测试应用程序。 恭喜，您已经成功创建并运行了本机应用程序。
结果
您可以从文档中查看官方的react native组件，也可以创建我们自己的UI组件。 随着创建更好的组件的需求的增长，该解决方案提出了各种开源软件包。 一些著名的选项是Native Base ， React Native Elements和Shoutem-UI 。 我们将使用Native Base。
安装Native Base， react-native-easy-grid （用于布局）和vector-icons（用于图标），
npm install native-base --save
npm install @expo/vector-icons --save
npm install react-native-easy-grid --save
npm install
or
yarn add native-base --save
yarn add @expo/vector-icons --save
yarn add react-native-easy-grid --save
yarn
现在，使用以下代码更改App.js，
App.js
结果
有关更多信息，请查看Native Base Components 。
componentWillMount（）中编写的代码是在呈现组件之前加载字体。 这些字体由Native Base在内部使用，如果在呈现组件之前未加载这些字体，则会抛出运行时错误。
我们将不使用页脚和自定义标头，因此在下一步中将其删除。 我在这里使用默认示例来展示如何使用现有的UI库创建漂亮的应用程序。
v0.2.0
目标：导航
正如人们可以使用URL /路由来构造Web应用程序一样，必须在本机应用程序中使用不同的屏幕。 我们基本上会创建不同的屏幕，并根据一些用户输入和App.js中的预定义条件来调用每个屏幕（请记住，App.js是我们应用程序中的单个入口点）。 我们可以创建自己的导航机制，并通过在App.js中显示/隐藏不同的组件来处理不同的屏幕，但是我们不想重新发明轮子。
我们将使用在官方文档中也建议的react-navigation 。 因此，让我们安装它。
npm install --save react-navigation
创建一个名为components的新文件夹，并在其中创建一个名为Navigation.js的新文件。 将以下代码复制到Navigation.js中，
组件/Navigation.js
代码很简单。 我们创建三个屏幕，分别为扫描仪，历史记录和结果。 屏幕不过是一个反应组件。 在这里，我们创建了三个组件，分别名为ScannerScreen，HistoryScreen和ResultScreen。 然后，我们创建一个RootStack，在其中定义屏幕的名称并为它们分配React组件。 也就是说，我们已经为ScannerScreen组件分配了Scanner名称。 然后，我们通过指定initialRouteName来指定要显示的初始屏幕。 最后，我们通过将RootStack包裹在createAppContainer中来导出它。
这是非常重要的一步，因此请不要忘记将RootStack包装在createAppContainer中，否则会出现错误。
当我们创建堆栈时，React导航会自动在Screen的道具内设置“ navigation”对象。 它用于在屏幕内执行各种导航。 例如，在ScannerScreen中，我们已使用它导航到其他屏幕，即History和Result。
最后，要查看我们的路由器的运行情况，我们将其导入App.js并使用它。 这就是更新后的样子，
App.js
恭喜，现在您知道如何处理多个屏幕了。
结果
如果您对导航栏感到好奇，则默认情况下，它是通过反应导航添加的，并且可以全局控制，也可以在每个屏幕中进行局部控制。 在这里，我们已经在每个组件中本地配置了标题栏。 即在ScannerScreen中，我们已经完全删除了标题。 在HistoryScreen和ResultScreen中，我们分配了标题标题。 有关更多信息，请查看在React Navigation官方文档上配置标题栏 。
有趣的事实：考虑一个带有屏幕A和B的堆栈导航器。导航到A后，将调用其componentDidMount。 当推入B时，它的componentDidMount也被调用，但是A保持安装在堆栈上，因此不调用它的componentWillUnmount。 从B返回到A时，将调用B的componentWillUnmount，但是A的componentDidMount并不是因为A始终保持挂载状态。 为了克服这个问题，我们必须使用反应导航提供的生命周期事件 。
v0.3.0
目标：如何在本地存储数据。
每个本机应用程序都需要存储数据，例如用户状态，登录状态，应用程序配置等。我们可以使用SecureStore ， AsyncStorage ， SQLite和Realm 。 这是最广泛且易于使用的服务。
Realm非常有名并且使用广泛，但是您必须执行expo exit才能使用它，因此我们在这里不再讨论。 但是了解这种工具很有用，以便将来使用。
SecureStore和AsyncStorage都是键值存储系统。 它们之间的唯一区别是它们存储数据的方式。 SecureStore加密数据，而AsyncStorage以纯文本格式存储数据。
我们将不会使用SecureStore或AsyncStorage。 我们将仅在应用程序中使用SQLite，但我在这里已提及它们，因为它们非常有用且易于使用。
安全存储
iOS：使用钥匙串服务将值存储为kSecClassGenericPassword 。 iOS具有附加选项，能够设置该值的kSecAttrAccessible属性，该属性控制何时可以获取该值。
Android：值存储在SharedPreferences ，并使用Android的Keystore系统加密。
我们可以使用以下方法来操纵数据。
-
SecureStore.getItemAsync(key) -
SecureStore.setItemAsync(key,value) -
SecureStore.deleteItemAsync(key) - 有关更多信息，请查看SecureStore官方文档 。
异步存储
它具有与SecureStore类似的API。 我们主要使用以下方法，
-
AsyncStorage.getItem(key) -
AsyncStorage.setItem(key, value) -
AsyncStorage.removeItem(key)
有关更多方法，请查看官方expo docs 。
SQLite的
当我们要保存大量结构化数据时，可以使用SQLite。 SQLite是本地轻量级SQL数据库。
如上所述，SQLite的替代方案：领域数据库是SQLite和Core Data的一种快速，易于使用的开源替代方案。
我们将从SQLite创建一个新的数据库对象，并对其执行一些事务。
创建一个新文件“ components / SQL.js”，并将以下代码粘贴到其中，
随着Screen组件的增长，很难将其保留在Navigation.js中。 因此，让我们分开导航和屏幕组件。 创建一个名为Screens的新文件夹。 创建三个文件ScannerScreen.js，HistoryScreen.js和ResultScreen.js。 所以Navigation.js现在看起来像这样，
组件/Navigation.js
在每个屏幕上使用以下代码。
屏幕/ScannerScreen.js
屏幕/HistoryScreen.js
屏幕/ResultScreen.js
最后，我们必须将InitDatabase方法调用到App.js中，
App.js
您可以使用输入字段在数据库中添加新行。 输入一些内容，然后单击“添加到数据库”。 要检查存储的结果，请检查历史记录屏幕。
结果
v0.4.0
目标：使用来自expo的camera / BarCodeScanner模块
在构建本机应用程序时，我们很可能会使用本机功能。 在使用本机功能之前，我们需要询问使用它们的权限。 我们可以通过使用expo中的Permission组件来做到这一点。 我们将请求相机许可。 我们将使用的另一个模块是BarCodeScanner来扫描条形码。 它只是“ 相机”模块的包装（您也可以直接使用“ 相机”模块扫描条形码）。
打开ScannerScreen.js并粘贴以下代码。 查看代码，注意我们正在检查componentDidMount（）方法中的权限。 授予权限后，我们将在全屏中呈现BarCodeScanner。 我们覆盖一个“历史记录”按钮以检查先前扫描的QR。
即使扫描了QR码，它也不会停止相机，并且仍会尝试扫描QR。 因此，当另一个屏幕聚焦时，相机仍将处于活动状态，并且将继续扫描QR。 为了克服这个问题，我们将组件与来自reaction -navigation的NavigationFocus 打包在一起 。 它为我们提供了一个方法集中在道具中的方法，以检查ScannerScreen是否在实际设备上显示（聚焦）。 我们使用该道具有条件地渲染BarCodeScanner组件。
屏幕/ScannerScreen.js
屏幕/ResultScreen.js
在ResultScreen组件中，我们只是从导航参数中获取qr并将其显示在Text组件中。
结果
现在，该应用程序已完成并且可以运行，但是用户界面不是很直观。 因此，让我们对其进行更正并改善UI。
v1.0.0
目标：更好的用户界面
此代码几乎可以自我解释。 我只是使用样式属性和其他组件来使UI更好。 我没有更改任何样板代码。 因此，我没有为代码编写任何解释。 但是，如果您有任何疑问，请在下面的评论中提及，我会回答。
在名为“ commons.js”的组件内创建一个新文件，并粘贴以下代码，
组件/commons.js
在下面的屏幕中也更改代码。
HistoryScreen.js
ResultScreen.js
屏幕/ScannerScreen.js
结果
源代码
该应用程序代码可在GitHub上获得 。
家庭作业
如果您忘记了所学的知识，那将是浪费时间。 所以这是一些作业。 花点时间自己完成。 我没有在任何地方为这些任务提供任何代码。 如果您遇到任何困难，请发表评论，我会回答。
- 添加一个按钮以删除HistoryScreen和ResultScreen中的QR码。
- 在右上角添加一个按钮（点三点）以打开“设置”屏幕。
- 成功扫描QR码后播放声音。 SettingsScreen中的Give选项可更改行为。
- 成功扫描QR码后，请振动手机。 SettingsScreen中的Give选项可更改行为。
提示：将声音和振动设置保存在AsyncStorage中。
如果您能想到改善此应用程序的其他方法，请在下面评论，我将其添加到本节中。
下一个
我试图在本文中介绍许多主题，但是篇幅太长了，因此无法涵盖API部分。 因此，在针对初学者2.0的文章中，我将介绍如何执行用户身份验证以及如何与服务器上的数据同步数据，本文将创建QR Scanner v2.0.0 。
结论
继续学习，也许力量与您同在。 如果您需要有关任何主题的文章，请告诉我。 我会尽力帮助您。 如果您有任何问题或建议，请留在下面的评论中。
附言：如果您发现本文很有帮助，请鼓掌！ s感觉很有意义，并给了我继续写作的动力。
From: https://hackernoon.com/react-native-for-beginners-fb3095968acf
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
