下午好，哈布罗夫斯克居民。 今天，我们与您分享一篇文章的翻译，该文章的翻译是专门为
ReactJS / React Native-Developer课程的首次运行而准备的。 好好阅读。
如果您是React Native世界的新手，那么您会知道它有一些陷阱，您需要避免。 在某些情况下，您将不得不事先做出选择，而不会丝毫知道其影响方式或影响。
下面我总结了一些个人经验中的最佳实用技巧，希望对您有用：)
仅当您真正知道自己在做什么时才使用Expo-Kit。
Expo是React Native的免费开源工具。 这可能是在React Native上创建应用程序的最佳工具集，但是它也有其局限性。
使用博览会：- 如果只想创建一个沙箱，则不要为您的应用程序创建存储库。 只需使用create-react-native-app包创建一个新应用程序。
- 如果您在创建应用程序之前进行了研究，并意识到博览会的解决方案可以满足其所有需求。
- 如果您没有Mac OS计算机，但是您仍想创建iPhone应用程序。 这是创建IPA可执行文件的唯一选择。
不要使用Expo：- 如果您是React Native的新手，您认为这是创建应用程序的唯一方法。 首先，检查它是否符合您的要求。
- 如果您打算将第三方RN软件包与本机用户模块一起使用。 Expo不支持此功能，在这种情况下，您将需要提取（弹出） Expo-Kit 。 我认为，如果您最初打算提取任何工具集，则根本不要使用它。 与根本不使用它相比，提取过程会使应用程序的创建复杂化。
总的来说，我认为Expo是一个很好的工具，我自己使用
Expo Snack共享React Native代码。 但是，目前它仅对创建某些类型的应用程序有用。
如何构造应用程序的文件夹和文件
在React Native上组织应用程序与在React上组织应用程序没有什么不同。 因此，如果您对此很熟悉，则只需遵循相同的逻辑即可。 但是，如果不是这种情况，那么下面概述的逻辑将派上用场：
- 将文件夹添加到根目录并命名为“ app”；
- 在“应用”中创建文件夹：
assets -在其中，我最多有三个包含字体，图标和图像的文件夹。
components -在这里您将放置所有共享的React组件。 通常，这些是我们称为“虚拟”的组件，因为它们没有状态逻辑，并且可以在应用程序内部轻松重用。
views -这些是我们的应用程序屏幕，从中我们可以切换到另一个屏幕。 React组件也存储在这里，我们称之为容器，因为它们存储了自己的状态。
modules -没有相应视图（JCX）的零件存储在此处。 典型的示例是颜色模块（包含所有应用程序颜色）和utils模块（包含可以重用的实用程序功能）。
services -这是包装API调用的函数。
i18n翻译存储在此处，供使用不同语言和区域设置的用户使用。
所有应用程序都需要某种类型的配置，因此我通常创建一个名为
config.js的文件并将其存储在该文件中。 如果配置文件中的行太多，则可以创建一个单独的
config文件夹并将其拆分为多个文件。
如果您有状态管理库，则还需要用于其组件的文件夹。 在Redux的情况下，将使用2个或更多文件夹，一个用于
actions ，一个用于
reducers 。 如果您不使用外部软件包，而是喜欢使用React Context API，则可以创建自己的提供程序，可以将其放置在modules文件夹或新的
providers文件夹中。
我们根据您的需求选择导航库
不幸的是，RN还没有完整的解决方案，或者至少不能替代旧的Navigator组件，因此现在我们将集中讨论社区如何解决此问题。 因此，如果您要创建一个项目并想知道要使用哪个导航库，则本节仅适合您。
通常，有两种类型的导航库：JavaScript导航器和本机导航器。 第一个是用JavaScript编写的，而本机库是根据平台（Android，iOS）用本机模块编写的，并连接到JavaScript模块以转发给代码。 前者更容易设置，而后者则更有效。 花时间确定哪种类型最适合您，然后从该类型的众多库中进行选择。
Spencer Carly做得很出色，并在React Native世界中开发了当前的Navigation选项，您可以阅读有关此主题的
文章 。 现在，最受欢迎的解决方案是作为JavaScript解决方案的
React Navigation和作为Native解决方案的
React Native Navigation 。
为了方便起见，请使用CSS-in-JS包装器库
在React Native中，CSS用JavaScript编写。 在这里，我们别无选择。 就个人而言，我不是使用纯JavaScript中的
StyleSheet.create方法和CSS代码，而是使用
样式化组件库。 样式化的组件使CSS更加清晰，并使JSX更具语义。
我最近写了一篇文章，说明为什么我更喜欢在
React Native应用程序中使用样式化组件，您可以阅读以更好地理解该主题。
预先确定您希望应用程序如何在具有不同屏幕尺寸的不同设备上扩展。
您很可能正在为一个以上的设备和屏幕尺寸开发一个应用程序。 现在有两种设计和应用程序开发方法。
您可以根据屏幕尺寸选择其他UX / UI。 对于大多数类型的应用程序，这可能是最好的选择，但它需要很多努力，因为您需要提出并实现几个屏幕选项。 屏幕尺寸可以使用
Dimensions API确定。 另一方面，您可以使用开箱即用的第三方软件包，该软件包提供了一些工具，例如
React Native Responsive UI 。
或者，您可以使用相同的UI / UX，它将针对所有屏幕尺寸按比例缩放。 例如，如果您正在开发游戏，则这是最佳选择。 同样，您可以使用第三方程序包，例如
React Native Responsive Screen 。
免责声明：我是React Native Responsive Screen包的创建者。
注意动画
动画对于移动应用程序至关重要，但是React Native的性能很差。
为了防止错误，您需要在设备上测试动画，因为仿真器无法提供正确的反馈。 您还需要尽可能使用
useNativeDriver （带有true），因为这将有助于获得更好的性能。
如果您想获得有关如何获得更好性能的更多技巧，请参阅我的上
一篇文章 。
还记得
- React Native没有DOM元素。 相反，我们使用本机元素。
- 关于CSS：
- 并非所有功能都受支持，至少目前还不支持。 要了解更多信息，请查看文档：“ 视图样式”属性，“ 图像样式”属性，“ 文本样式”属性。
- 速记属性并不总是很好用，因此最好使用特定的属性（例如，下边距，上边距，左边距，右边距而不是右边距）。
- 并非所有属性都支持百分比。 例如，以下内容：页边距，边框宽度和边框半径。 如果有人尝试使用百分比值，则RN将忽略它们，否则应用程序将原则上崩溃。
- RN支持开箱即用的Flex。 检查它并在适当的时候使用。 这是最好的CSS盟友！
仅此而已。 在
此处了解有关该课程的更多信息。