在React Native上开发移动应用程序的过程中，我尝试了几种用于导航的标准库，但是对于每个标准库，我都感到非常痛苦，痛苦。 它们变得如此不便且不明显，以至于即使是最简单的看似功能的开发也变成了一项艰巨的任务。
使用react-navigation或react-native-router-flux，如果您需要创建一个可以从多个不同位置访问的屏幕，那么创建嵌套路由的层次结构将非常困难，以至于一切正常。 或者，如果您需要一个带有非默认动画的屏幕来显示，则还必须吹气。 而且，在这些库中体现了包括UI组件（如顶部导航栏和选项卡）的有害和破坏性想法。 当一个库仅执行一个功能，而定性地执行一个功能时，这直接违反了unix-way方法。 由于UI组件和导航之间的这种紧密关系，经常会出现错误-屏幕上会出现几个导航栏，其中一个导航栏可能带有后退按钮，而另一个则是屏幕名称。
由于对标准库感到厌烦，我决定开发自己的导航器。 开发的主要目标是API的简单性，缺少嵌套屏幕的刚性结构以及将动画与内容分离。 因此，react-native-easy-router诞生了。
API简单且缺乏刚性结构
在我之前使用的导航器中，只能通过诸如route.state.params.name之类的困难路径来访问传递到屏幕的参数。 在导航器中，我将参数直接传递到屏幕组件。 在某些情况下，这可能导致名称冲突，但是我决定忽略该问题的解决方案。 另外，在下面的代码中，您可以看到路线的结构不清晰，您可以从其他任何屏幕添加任何新屏幕。
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text> </View> ) const Second = ({ router, name }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text>Hello {name}!</Text> <Text onPress={() => router.pop()}>Go back</Text> </View> ) const routes = { First, Second } export default () => <Router routes={routes} initialRoute="First" />
动画制作
动画甚至更易于使用。 如果在react-navigation和react-native-router-flux中必须躲避以便为特定屏幕制作非默认动画，那么在react-native-easy-router中，屏幕可以以不同的动画飞入，此外，屏幕可以在并以不同的动画飞出。 例如，在下面的示例中，屏幕将从下方飞向右侧。
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text> </View> ) const Second = ({ router }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text onPress={() => router.pop({type:'right'})}>Go back</Text> </View> ) export default () => <Router routes={{ Screen1, Screen2 }} initialRoute="Screen1" />
您甚至可以添加自己的自定义动画。 也许您希望屏幕飞出右下角并同时滚动。 有关如何执行此操作的示例，请参见
此处 。
结论
开发的导航器已经在我们的多个商业项目中使用，并且在一些React Native开发人员中得到了少量分发和好评。 如果要查看更多使用示例，并确定是否可以在项目中使用此导航器，则可以深入研究项目
存储库 。