stack navigator独有的窗口标题状态栏
本节讲解如何设置StackNavigator
StackNavigator 有两个参数，routerconfig,navigationconfig。其中，routerconfig配置如下screen页面配置，可以设置跳转具体页面，path是为deeplink使用的。StackNavigatorConfig，配有一下参数：
initialRouteName-默认路由.
initialRouteParams- 初始路由参数
navigationOptions- navigation参数
这里的navigation参数又有：
headerStyle:设置整个header的样式，比如：{backgroundColor:"#ff5039"},
headerLeft:,设置header左半部分，可以有元素组件，
headerTitle: 设置header标题 ,
headerTitleStyle:设置header标题样式,
headerRight:, 设置header右半部分组件，
gesturesEnabled:true，是否支持手势，Android默认是FALSE，iOS是TRUE
paths-覆盖路由中的path deeplink使用
Visual options:
mode- 定义渲染的和跳转动画的风格，可以设置为card,modal。默认为card。modal可以使界面跳转的而动画是从底部逐渐显示到整个屏幕，这个只对ios有效，因为android,默认转场动画就是从底部逐渐显示到真个屏幕:
headerMode-指定如何渲染头部，可以设置为float,screen,none。如果设置为none,则不会有头部；如果设置为float, 页面跳转时，header是一直在顶部，而且如果header变化了的话，会有动画，有点像android的共享动画；设置成screen的话，头部是跟随这新的页面重新出现
transitionConfig- 一个函数类型，可以用来配置转厂动画.所有动画都在'react-navigation/src/views/CardStackStyleInterpolator';这里面，如何设置动画呢，比如使用左进右出的方式：
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
transitionConfig: (() => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}))
onTransitionStart- 函数类型，动画开始后的回调.
onTransitionEnd- 函数类型，动画结束时的回调
const App = StackNavigator({
ReactNavigation:{screen:ReactNavigation},
Main: {
screen: MainScreen,
path:'kingdom/:Main'
},
Profile: {screen: ProfileScreen},
},
{
initialRouteName:'ReactNavigation',
initialRouteParams :{
AppName:'KingdomYrt'
},
path:'kingdom/:Index'
});
navigationConfig两种方式设置：
①静态写死的方式
class MyScreen extends React.Component {
static navigationOptions = {
title: 'Great',
};
②动态通过方法配置方式
class ProfileScreen extends React.Component{
static navigationOptions = ({ navigation,screenProps }) => ({
title:{`Chat with ${navigation.state.params.userName}`},
headerRight: {navigation.state.params.setUserName('huanglimei')}} />,
});
这里面就有screenProps就是用于父窗口向子窗口组件传递属性值。我们创建StackNavigator的时候，如果想从外部给屏幕组件传入扩展的属性，可以使用这个属性，一定是这个属性，特别是在TabNavigator中，子组件和TabNavigator之间的通信就是靠这个来完成。
* screenProps 给StackNavigator传入该属性，这个属性将继续传递StackNavigator中的screens
dispatch-Send an action to the router
使用dispatch可以向任何navigation传递一些其他的action，主要支持的action有：
Navigate
import { NavigationActions } from 'react-navigation'
const navigationAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
// navigate can have a nested navigate action that will be run inside the child router
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigationAction)
Reset
Reset方法会擦除掉所有的导航状态，并且使用内部新的结果替代
import { NavigationActions } from 'react-navigation'
resetActions(){
//这个方法是重置了整个路由栈信息，那我们要在actions中重新定义路由栈，下面的的index参数代表新路由栈默认显示的页面
const resetAction=NavigationActions.reset({
index:1,
actions:[
NavigationActions.navigate({routeName:'ReactNavigation'}),
NavigationActions.navigate({routeName:'profile'})
]
})
this.props.navigation.dispatch(resetAction)
}
