Tag: React导航

让我们用React Navigation导航

我们都知道，实施导航很重要，有时会给移动应用程序的开发带来痛苦。 因为它直接或剧烈地影响着用户体验和应用程序性能的好坏。 您需要从多个有趣的导航解决方案中进行选择，并以明智的方式使用它来获得所需的结果。 在React Native世界中，大多数事情仍然充满活力和不成熟。 React社区非常强大且富有成效。 但是，这给所有积极的事情带来了痛苦。 例如，在几次版本更新后，可能会弃用您喜欢的库或所选功能。 以我自己的经验，我开始使用react native的导航器api，然后决定切换到Navigation Experiment以在性能和前向兼容性方面获得更好的结果，它看起来很有希望，当时的嗡嗡声是非常积极的，但是最近突然不推荐使用。 所有这些事情几乎都发生在一年之内。 首先，什么是React Navigation？ 在React Native官方文档中，它被描述为： React Navigation提供了一种易于使用的导航解决方案，能够在iOS和Android上呈现常见的堆栈导航和选项卡式导航模式。 由于这是JavaScript实现，因此与状态管理库（例如redux）集成时，它提供了最大的可配置性和灵活性。 是的，它与IOS和Android都兼容，非常灵活，您可以将其与redux，flux或mobx集成。 在开始之前，让我们检查示例导航应用程序的最终版本。 为了简化和提高生产力，我们将在Expo的帮助下对该示例应用进行编码（我不会进入主题，您可以从链接中进行检查），因此您也可以在Expo Client中查看工作示例。 好吧，让我们现在滚动。 如果您想签出并玩代码； 这是 github repo链接和expo链接用于示例应用程序。 开始吧 ！ 用expo创建一个新的空白项目，不要让expo为导航布局一些代码，而是选择空白项目。 现在，我们可以将反应导航添加到我们的项目中。 npm install –save react-navigation 或者如果您安装了纱线； yarn add react-navigation 与三种类型的导航器捆绑在一起的React导航； StackNavigator，TabNavigator和DrawerNavigator。 我不想为您提供有关导航器类型的更多详细信息，您可以从文档中进行检查。 我们将在我们的应用程序中使用这三个。 现在，让我们创建一个文件，并像这样在其中添加StackNavigator 。 导入{ StackNavigator， DrawerNavigator， TabNavigator} 来自“反应导航”； 从’./FirstScreen’导入FirstScreen； 从“ ./SecondScreen”导入SecondScreen； 从’react’导入React； […]