react-navigation自学总结

详细讲解： http://blog.csdn.net/yancechen2013/article/details/77389331

具体实现： http://blog.csdn.net/u011468619/article/details/72781959

mobx中文网: http://cn.mobx.js.org/

首先先将reacrt-navigation 下载到项目中

npm install react-navigation --save

react-navigation主要由三部分组成

1、StackNavigator：为您的应用程序在每个新屏幕放置在堆栈之上的屏幕之间进行切换。

2、TabNavigator：相当于IOS中TabBarController，屏幕下方的标签页

3、DrawerNavigator：抽屉效果，侧边滑出

StackNavigator导航栏

StackNavigatorConfig 导航器的配置

• • initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面
  • initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取
  • navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的navigationOptions 的对应属性覆盖。
  • paths - 路由中设置的路径的覆盖映射配置
  • mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ：

card - 原生系统默认的的跳转，左右互换 

modal - 只针对iOS平台，模态跳转，上下切换

• • headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种：

float - 渐变，类似iOS的原生效果，无透明 

screen - 标题与屏幕一起淡入淡出，如微信一样 

none - 没有动画

• • cardStyle - 为各个页面设置统一的样式，比如背景色，字体大小等
  • transitionConfig - 配置页面跳转的动画，覆盖默认的动画效果
  • onTransitionStart - 页面跳转动画即将开始时调用
  • onTransitionEnd - 页面跳转动画一旦完成会马上调用 

代码示例：

const StackNavigatorConfig = { initialRouteName: 'Home', initialRouteParams: {initPara: '初始页面参数'}, navigationOptions: { title: '标题', headerTitleStyle: {fontSize: 18, color: '#666666'}, headerStyle: {height: 48, backgroundColor: '#'}, }, paths: 'page/main', mode: 'card', headerMode: 'screen', cardStyle: {backgroundColor: "#ffffff"}, transitionConfig: (() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal, })), onTransitionStart: (() => { console.log('页面跳转动画开始'); }), onTransitionEnd: (() => { console.log('页面跳转动画结束'); }),};

首先先创建一个StackNavigator

import {StackNavigator} from 'react-navigation'

cont screen1=()=>(这里是第一个页面 可以使用class创建return出来)

cont screen2=()=>(这里是第二个页面 可以使用class创建return出来)

const RootNavigtor=StackNavigator({ //注册一个导航

//这里相当于angular的路由配置

//其中Home....就相当于路由名

Home:{// 这是第一个路由配置

screen:screen1, //这里相当于templateURL 是配置页面的name

navigationOptions:{//这里是为对应路由页面进行配置的一个对象

title - 可以作为头部标题 headerTitle ，或者Tab标题 tabBarLabel

//在这里可以自定义一个标题(只有StackNavigator有这个标题)

headerRight: <Button title ="Info" />

header - 自定义的头部组件，使用该属性后系统的头部组件会消失，如果想在页面中自定义，可以设置为null，这样就不会出现页面中留有一个高度为64navigationBar的高度

headerTitle - 头部的标题，即页面的标题

headerBackTitle - 返回标题，默认为 title

headerTruncatedBackTitle - 返回标题不能显示时（比如返回标题太长了）显示此标题，默认为 “Back”

headerRight - 头部右边组件

headerLeft - 头部左边组件

headerStyle - 头部组件的样式

headerTitleStyle - 头部标题的样式

headerBackTitleStyle - 头部返回标题的样式

headerTintColor - 头部颜色

headerPressColorAndroid - Android 5.0 以上MD风格的波纹颜色

gesturesEnabled - 否能侧滑返回， iOS 默认 true ， Android 默认 false 

使用示例

}

},

Details:{//这是第二个路由配置

screen:screen2 //这里同上 这是第二个要展示的页面

navigationOptions:{

title:"这是第二个页面"

}

}

})

//与用户实现交互button

static navigationOptions =({navigation})=>{

console.log(navigation);//可与具体观察它的变化

const { state, setParams } = navigation;

const isInfo = state.params.mode === 'info';

const { user } = state.params;

return {

title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,

headerRight: (

<Button

title={isInfo ? 'Done' : `${user}'s info`}

//setParams设置一个新的属性或者从新赋值

onPress={() => setParams({ mode: isInfo ? 'none' : 'info' })}

/>

),

};

}

重点页面之间跳转传参(navigation)

在子页面中可以使用 this.props.navigation获得到很多属性

其中this.props.navigation.navigate('路由地址',{data:传递的参数})

navigate()方法是实现路由之间的跳转功能的

在就是this.props.navigation.goBack()方法：

goBack() 不传参数时指 返回上以页面（从哪里点进来回哪里去）

goBack("Home") 可跳转到首页 其余都是返回上一页面

接收参数：

传递过来的参数可以使用this.props.navigation.state.params接收

但是有一点 初始页面是没有params的 会报错（指上来就获取 除非有参数）

使用this.props.navigation.state.params.参数名就可以拿到参数

2.TabNavigator

TabNavigator 是用于列表式导航

与stackNavigator用法一直 首先是注册一个导航

const TabNavitgator=({//这里是注册一个导航

//配置路由及参数

Home:{

screen:HomeScreen, //路由参数所对应的页面

navigationOptions:{ //导航的相关配置

tabBarLabel:"Home" //这里是配置导航的Name

tabBarIcon:({tintColor,focused})=>{

//这里做一些Icon的相关设置

}

}，

Profile: {

//这里配置第二导航的参数

},

})

3.DrawerNavigator

DrawerNavigator导航类似于qq左侧的抽屉导航

主要用法和StackNavigator/TabNaviator类似

首先是先注册一个导航

const RootTab=DrawerNavigator({

//里面内容与与上面一样

Home:{

screen:HomeScreen, //路由参数所对应的页面

navigationOptions:{ //导航的相关配置

drawerBarLabel:"Home" //这里是配置导航的Name

drawerBarIcon:({tintColor,focused})=>{

//这里做一些Icon的相关设置

}

}，

Profile: {

//这里配置第二导航的参数

},

})

使用组件之间的嵌套可以模拟实现一个聊天类的应用程序

使用StackNavigator 与 TabNavigator

1.首先先分别创建导航StackNavitor/TabNavigator(最少创建俩个组件才能看出效果)

2.在TabNavigator中默认要跳传的路由 设置页面为 StackNavitor注册组件的名字

3.如：在这里我分成了俩个不同的js

//stackNavigator.js

const RootStackNavigator=StackNavitor({

toute1:{

screen:screenName

}

toute2:{

screen:screenName2

}

})

export default RootStackNavigator //输出

//tabNavigator.js

impor RootStackNavigator from 'stackNavitor'

const RootTabNavigator=TabNavitor({

Home:{//默认要跳转的路由

screen: RootStackNavigator //stackNavigator传来的组件

}

toute4:{

screen:screenName2

}

})

注：TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs

RouteConfigs导航路由的配置，同StackNavigator的路由配RouteConfigs一样。

TabNavigatorConfig

TabNavigatorConfig配置TabNavigator的一些属性。

详细地址： https://www.2cto.com/kf/201709/683530_2.html