引导你的 React Native 应用

为什么选择 React Native？

我不会告诉你如何制作应用程序。

我来帮助你做决定

启动

Android/iOS：该走哪条路？

应用程序的各部分

让我们谈谈开发经验

大家好！这是我在 Dev.to 的第一篇博文，很高兴能成为你们社区的一员。😇

我玩 React Native 已经有一段时间了，非常喜欢它。我无时无刻不在想，混合应用的世界已经变得多么酷炫。它目前是 0.55 版本！

你可能会问，生产级应用是基于 0.55 版本构建的吗？没错。很多公司都在用它，比如 Instagram、Myntra、Treebo、Airbnb、Uber，当然还有 Facebook。但这有什么大不了的？为什么它会引起如此大的轰动？我今天为什么在这里写信给你？

为什么选择 React Native？

最重要的是，您的应用将通过一个代码库隐式支持 iOS 和 Android。这样​​您就可以节省编码时间，还能节省招聘成本。

不仅如此，如果您的生态系统已经涉及使用 React，那么您可以确保大多数应用程序（无论是 Web 还是原生应用程序）的外观和工作方式都相同。

另外，在开始使用 React Native 之前需要先了解 React 的说法其实是错误的。我就是先从 React Native 开始的。:)

我不会告诉你如何制作应用程序。

好吧，想想办法。直到今天，我也一直在和很多人一起努力。用 Google 查找，了解具体方法，访问 Stack Overflow、GitHub issues，甚至加入开发者的 Slack 频道，他们或许能帮你找到问题所在，以及你能做些什么。多和你的同行交流，因为你的问题有一半都和 JS 有关。

很多时候，在使用 React Native 编写应用时，你会意识到——你的问题可能还没有一个正确的答案。但在我看来，这正是乐趣所在。你经常会看到几周前的问题，而你试图解决的问题，评论却只有几个小时前才出现？你并不孤单。

与此同时，世界各地的优秀开发者正在为您构建一些最棒的库。以 React Navigation 为例。这个曾经备受诟病的库，如今势头强劲，几个月前还只是 0.something.beta27 版本。现在它几乎已经是 2.0 版本了，几乎涵盖了解决导航问题所需的一切。

这不是很疯狂吗？

我来帮助你做决定

React Native 的世界如此丰富，想要追踪所有动态并非易事。作为一个刚刚起步的人，你可能会问我——我到底该从哪里开始呢？

我只有一个建议——今天就开始构建，然后慢慢适应。很快就会变得非常简单。你会发现自己会经常查看Facebook 的 React Native 文档，所以最好先把它收藏起来。

启动

方法一：安装Expo 的 XDE来初始化并运行你的项目——只需访问https://expo.io/即可。他们的文档是我读过的最好的文档之一。

您还可以全局安装 create-react-native-app (CRNA) 并执行

$ create-react-native-app my-app
$ cd my-app
$ yarn start

就是这样！您可以继续使用它与 Expo 的 Android/iOS 应用程序，或者您可以在您的机器上使用模拟器来运行您的新项目。

在深入应用开发的过程中，有一天你可能会意识到，你想要构建的这个新功能在 React Native 中还没有可用的 API，而你想为 iOS 和 Android 编写自己的原生代码。到那时，你随时可以选择将它应用到你的项目中。你可以在这里eject找到完整的教程。🙂

方法二：最基本的

为了保持较低的依赖性，您还可以使用react-native-cli启动您的应用程序。

1. 安装 react-native-cli
2. $ react-native init AwesomeProject
3. $ cd AwesomeProject
4. $ react-native run-ios或者$ react-native run-android
5. 更改代码并享受乐趣

Android/iOS：该走哪条路？

刚起步时，不要考虑你的目标平台。先思考你的业务逻辑。即使你没有同时关注这两个平台，也要尝试同时为它们构建。

不要以为它是跨平台的，就先做 iOS，然后再做 Android。它确实是跨平台的。但还是存在很多小问题，比如 iOS 和 Android 处理边距的方式不同，或者 Android 使用高程 (elevation) 而不是盒子阴影。

虽然这些可能是小事，但并发处理才是正道。但归根结底，这取决于你拥有的设备。如果你使用 Linux/Windows/Android 生态系统，而没有 Mac 或 iPhone，那么你显然会为 Android 构建应用。:P

应用程序的各部分

成分

从 React Native 的自带组件入手，并大量使用它们。View、Text、Button、Touchables、ScrollView、KeyboardAvoidingView、WebView、Flatlist 等等，基本上涵盖了你应用中所需的所有组件。所有 UI 库都基于这些组件。

就像 Web 领域的 Bootstrap、Material UI 等库一样，React Native 也有一些可用的库。其中最受欢迎的一个是Native Base。Treebo也正在构建一个完整的 React 和 React Native 库。我们称之为Leaf UI，这是我们为社区提供的开源礼物。

这些 UI 库的意义在于，它们能简化你应用某些组件（比如 Toast 通知）的工作。如果你尝试自己制作这些组件，最终可能会花费大量时间。

但请始终记住，无论如何，简单才是关键。依赖越多，跟踪起来就越困难，你肯定不想最终陷入依赖地狱。因此，最佳实践是使用自己的辅助组件。例如，创建一个自己的 Button，它在内部返回 React Native 的 TouchableOpacity 或 Native Base 的 Button。如果明天你找到了更好的解决方案，只需修改一个文件即可。

处理图像

图片可能是你应用的重要组成部分，而 React Native 有一个Image组件，可以轻松渲染本地和远程图片。但需要注意的是，目前还没有原生支持 SVG，这很可惜。:(

我们确实有一个名为react-native-svg的库，它允许您编写自定义 SVG。但这会给您带来很大限制，因为您无法渲染本地存储或远程的 SVG，而必须自己编写。渲染 SVG 的一个不太好的替代方案是使用 WebView。这会占用大量性能，因此您最好使用 PNG 或 JPEG 格式。

难过？好吧，我找到了一个符合我需求的 SVG 解决方案。就是我之前发现的一个很棒的 CLI，它可以将 SVG 文件转换为 React Native 组件，然后与 react-native-svg 一起使用。我不知道这种方法的可扩展性如何，也不知道它在多少情况下会有效。不过我已经用得挺多了。:)

对于图标，很多人会使用字体。您有一个名为 react-native-vector-icons 的库，它使用字体。您也可以使用自己的字体！查看Icomoon。

导航

导航是任何应用程序最重要的方面之一。React Native 并没有提供开箱即用的功能。

从一开始就做好这一点至关重要，因为应用程序的整个框架都依赖于导航。我强烈推荐React Navigation。我还记得它在 Beta 阶段使用起来有多难。文档也非常混乱，对于初学者来说可能现在仍然如此。从那时起，它已经收到了大量的贡献，最近，它已经发布了 2.0 版本候选版本。

要从一个屏幕导航到另一个屏幕，只需navigation在组件之间传递一个 prop 并执行this.props.navigation.navigate('CoolScreen');

以 Expo 为您提供的样板为例。

这里，你可以看到三个屏幕和底部的一个 TabBar。TabBar 是一个导航器，用于控制这三个视图。在 React Navigation 中，你可以嵌套导航器。此外，在任何导航器中，你都可以挂载任意数量的屏幕。

代码如下：

在这里，您的 TabNavigator 被用作 RootNavigator 中的一个屏幕。您可以像这样嵌套它们，或者以任何适合您逻辑的方式嵌套它们。:)

如果您认为这个库不适合您，还有其他一些选项，如下所示：
- React Native Router Flux
- React Native Navigation
- React Router Native

状态管理

控制组件的数据类型有两种：props和state。props它们由父组件设置，并且在组件的整个生命周期内保持不变。对于即将发生变化的数据，我们使用state。

您的整个应用程序可以围绕组件特定的状态构建，这些状态通过 props 在子组件和父组件之间进行通信，或者您可以借助Redux和MobX等库。当然还有其他选择，但这两个是最受欢迎的。

这完全取决于你，以及你的应用可能由功能数量决定的规模。使用内部状态确实很容易理解和使用，但在规模化时很难跟踪。想象一下，一百个屏幕使用了一百个组件。现在想象一下在这里使用内部状态。这就是 Redux 或 MobX 之类的工具被创建的原因。它们位于整个应用的顶层，为你提供 store 和 action，你的任何组件都可以
在需要时使用它们。

我喜欢 MobX 和 Redux，用哪个都行。选择适合你用例的那个。

数据存储

Redux 和 MobX 都提供了 Stores，它们本质上是一些实体，用于在调用 API 时存储数据。Store 在各个组件之间共享，确保在需要时所有数据都可用。它们保存在内存中，并且不是持久化的。

对于持久数据，您可以像往常一样使用数据库或文本文件。React Native 的AsyncStorage是一个基于数据库的 API。它在您的系统中存储键值实体。您会发现自己经常使用它来存储诸如身份验证令牌、持久应用程序状态
等内容。例如，跟踪应用程序首次运行时显示的介绍屏幕。

造型

样式设置相当简单。就像 CSS 一样，只不过CamelCase用 代替kebab-case。您可以通过内置的StyleSheet API来实现。

如果你的计划还包括使用 React 开发 Web 应用，那么一个叫做Styled Components的流行库非常适合你。它能让你轻松地使用带标签的模板字面量和 CSS 编写样式。这样一来，你的样式和组件之间就会形成 1:1 的映射，从而更容易跟踪。

样式表方式：

样式化组件方式：

你认为哪一个更具可扩展性？😉

联网

要在您的应用中加载互联网数据，您需要 API 来与其通信。React Native 隐式地为您提供了对 和 WebSocket 的支持。点击此处fetch阅读完整教程。

让我们谈谈开发经验

我使用 React Native 构建代码非常有乐趣，这主要归功于我的
生态系统。我的主显示器上安装了 VS Code 和模拟器。我的
副显示器上则安装了日志和调试器。

项目结构

在开始开发应用程序之前，确定其项目结构非常重要
。目前有两种常见的替代方案，它们各有
优势和用例。

• 按功能分类的文件夹

  当你考虑可扩展性时，这应该是你的首选项目结构
  。如果你的应用有 50 个功能，最好
  将与这些功能相关的文件放在单独的文件夹中。这样
  查找文件会非常方便。

• 按类型分类的文件夹

  这是你在样板文件中看到的最常见的结构
  。为什么？因为样板文件没有足够的代码来按
  功能拆分。所以在这里，你可以将文件拆分为组件、容器、
  屏幕、资源等。总而言之，这对于
  功能较少的小型项目非常有效。

错误追踪

生产环境中的 Bug 追踪不容小觑。我推荐使用Sentry或Bugsnag来追踪 React Native。虽然 Play Store 也会提供 Bug 报告，但最好能有一个地方来追踪所有 Bug。

调试

要使用应用内开发工具，您可以阅读此处文档中提供的教程。

VS Code 和 React Native 工具

React Native Tools 是一款非常棒的 VS Code 扩展。很多人只是把 VS Code 当作​​代码编辑器。有了这样的工具，VS Code 可以变成强大的调试工具。

使用 React Native 工具，您可以通过设置断点或监视轻松调试代码，react-native从命令面板快速运行命令，并使用 IntelliSense 浏览 React Native API 的对象、函数和参数。

代码检查

帮自己个忙，用一下 linter 吧。我用的是eslint。没错，它有时会很烦人，但随着时间的推移，你会自动开始写出正确的代码。这能防止你犯愚蠢的错误。它会告诉你什么时候应该把组件写成函数组件，或者什么时候定义了一个变量却从未使用过。

保持代码库清洁，并成为明天开始与您一起在该项目上工作的新开发人员的优秀接待者。

React Native 的内容非常丰富。在这篇不起眼的文章中，我仅仅尝试触及皮毛。我尝试总结一下我所了解的内容。我希望这篇文章能让你深入了解各种可能性，并且对刚入门的人来说也足够了。

我不是 React Native 的大师，本文中可能遗漏了很多内容，但我只是想分享我的经验。:)

如果您有任何问题，请问我，我会尽力回答。

谢谢，人类。现在我们开始吧。