React Native和Flow入门

向您的React Native应用程序添加静态类型。

Flow使我们能够轻松地向我们的JavaScript添加静态类型检查。 Flow将帮助您防止错误，并可以提供更好的代码文档。 许多React Native文档和源代码已经使用了流程，因此从来没有比现在更好的时间开始使用它了！

在本文的结尾，我们还将SublimeLinter-flow添加到Sublime Text中，以便在编辑器中进行实时类型检查！

向React Native添加流

首先，让我们创建一个新的React Native应用程序：

 反应本机初始化流程 

.flowconfig文件是放置特定流配置的位置，类似于.eslintrc文件。 新的React Native项目带有.flowconfig用的预配置.flowconfig文件。 在本教程的其余部分中，我们将使用此默认配置。 如果您想自定义配置或了解有关配置的更多信息，请查看文档。

现在，我们需要使用flow-bin软件包安装flow。

cd进入根目录，然后在文本编辑器中打开.flowconfig文件，并查看底部以查看您的应用程序需要哪种版本的流：

对我来说，它的版本是0.33.0 ，所以它将成为我安装并另存为dev依赖项的版本。

 纱线添加flow-bin@0.33.0 --dev 

要么

  npm我flow-bin@0.33.0 --save-dev 

在本教程中，我们将按照文档以及我在社区中与大多数人交谈的建议在每个项目的基础上安装流程。 首选安装方法是按项目进行安装的原因是，不同的.flowconfig配置需要使用不同版本的流，如果在全局范围内安装它，则在很多情况下将无法正常工作。 要了解有关全局安装的更多信息，请在此处查看文档。

现在已经安装了正确的流版本，我们需要做的最后一件事是设置一个简单的命令，以便我们在每次键入check时都可以运行。 对我来说， npm run flow非常有意义，因此让我们打开package.json并将流程脚本添加到我们的脚本中：

  “脚本”：{ 
  “ start”：“节点node_modules / react-native / local-cli / cli.js开始”， 
  “ test”：“开玩笑”， 
  “ flow”：“流” 
  }， 

现在，我们可以转到命令行来首次启动流服务器：

  npm运行流程 

我们应该得到这个：

从文档：

使用Flow服务器

对于大型项目，您可能只希望Flow在文件更改时逐步检查文件。 Flow使用客户端/服务器体系结构，该体系结构允许您启动将在后台运行的Flow服务器并在检查文件更改时键入检查文件。

在我们的项目中，我们通过运行node_modules/.bin/flow启动服务器，该node_modules/.bin/flow已保存为npm脚本npm run flow 。

然后，您可以稍后使用相同的命令再次检查服务器的状态： npm run flow ，如果所有测试都通过，则应该看到此信息：

要停止服务器，我们可以运行node_modules/.bin/flow stop来停止服务器。 我还将其添加为名为flow-stop的脚本，以使将来更容易启动和停止流服务器：

  “脚本”：{ 
  ... 
  “ flow”：“流”， 
 "flow-stop": "flow stop” 
 } 

现在，让我们添加一些规则！

让我们打开index.ios.js或index.android.js并创建一个将两个数字相乘的方法：

 函数乘法（n1 ：数字 ，n2： 数字 ） ：数字 { 
 返回n1 * n2; 
  } 

现在，我们可以在代码中使用此方法：

   {multiply（14，14）}  

如果我们运行npm run flow我们将No errors! 。 现在，让我们更改乘法方法以引发错误：

   {multiply（14，'a'）}  

现在，如果我们运行npm run flow我们将得到如下内容：

流程正常！

您可以对流进行很多操作，并且本文并不旨在全面介绍流。 如果您想了解更多有关可以使用的类型以及如何实现它们的信息，请在此处查看文档。

向Sublime文本添加SublimeLinter-flow

SublimeLinter-flow允许我们在键入代码时进行即时类型检查。 如果您使用Sublime Text，并且想在工作流程中使用Flow，那么SublimeLinter-flow是必须的！ （类似的插件也可用于Atom，VSCode和大多数其他流行的文本编辑器）。

首先，我们首先需要确保在项目中已在node_modules/bin/flow设置了node_modules/bin/flow （如上所述），或者已全局安装了node_modules/bin/flow 。

接下来，我们需要安装SublimeLinter或确保已安装它。 如果您尚未安装SublimeLinter，请在此处查看安装说明。

现在，我们需要输入Cmd+shift+p打开SublimeLinter-flow ，然后选择Package Control: Install Package ，然后搜索SublimeLinter-flow ，并在找到包后单击它。

现在，SublimeLinter流已安装。

接下来，重新启动Sublime Text以确保该程序包正常运行，并打开放置原始类型注释index.ios.js或index.android.js 。

现在，我们应该直接在编辑器中获取错误消息和突出显示语法：

这就是您开始使用React Native和Flow所需的全部知识！

特别感谢Mike Grabowski帮助我学习Flow。 如果您想了解如何将Flow添加到Redux应用程序中，还请查看https://blog.callstack.io/typed-redux-2aa8bff926ff#.e5vp4d7oh。

我叫Nader Dabit。 我是AWS Mobile的开发人员倡导者，负责AppSync和Amplify等项目，也是React Native Training的创始人。

如果您喜欢React和React Native，请查看我们的播客-Devchat.tv上的React Native Radio

另外，请查阅我的书《 React Native in Action》（可从Manning Publications获得）

如果您喜欢这篇文章，请推荐并分享！ 谢谢你的时间！