ReactNavigation的个人理解

对于ReactNavigation我的理解就是react-native的视图管理中心，控制着视图之间的联系，以及定义一些交互方法。这是我们开始coding的第一步，就是根据需求选择合适的页面导航。

Navigator是用来定义应用程序的导航结构，配置的标题栏和选项卡栏。我把它理解成，就是把几个视图声明一个彼此之间的关系，定义他们之间的联系方式以及出入行为等等。

它一共有三种导航器类型：

StackNavigator ： 就是普通的堆栈式页面，一次渲染一个屏幕以及屏幕之间的转换。
配置方法：const ModalStack = StackNavigator(
{
//路由名
Home: {
//视图名
screen: MyHomeScreen,
},
Profile: {
screen: MyProfileScreen,
},
}
)
TabNavigator ：渲染出一个标签栏页面，可以在多个屏幕之间切换，就是一般应用程序的底部几个主页面。
配置方法：const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
},{
//配置标签页的一些参数，比如位置，动画，以及图标样式等。
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
DrawerNavigator ：从屏幕左侧滑入的抽屉式导航，比如网易云音乐的侧滑。

image.png

配置方法：
const MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
它们三个彼此都有类似的属性，用来自定义一些风格和样式等等。

这里介绍一下StackNavigator的一些属性。

title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用

header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null

headerTitle：设置导航栏标题，推荐

headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null

headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"

headerRight：设置导航条右侧。可以是按钮或者其他视图控件

headerLeft：设置导航条左侧。可以是按钮或者其他视图控件

headerStyle：设置导航条的样式。背景色，宽高等

headerTitleStyle：设置导航栏文字样式

headerBackTitleStyle：设置导航栏‘返回’文字样式

headerTintColor：设置导航栏颜色

headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0

gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭

navigation又有5个方法:navigate, goBack, state, setParams, dispatch

Navigate：导航到其他路线。这个很好理解，就是调用方法导航到其它页面去而已。

Back ：回到之前的状态。返回到上一个屏幕并关闭当前屏幕。

Set Params ： 为给定路线设置参数。给新的路由状态页面设置参数。

下面两个不是很理解！

Reset： 用新状态替换当前状态

Init ：用于在状态未定义时初始化第一个状态。

新手随便写点笔记，对于react-navigation的理解不是很多，欢迎补充！