stack navigator獨有的窗口標題狀態(tài)欄
本節(jié)講解如何設置StackNavigator
StackNavigator 有兩個參數(shù)，routerconfig,navigationconfig前塔。其中，routerconfig配置如下screen頁面配置迄汛，可以設置跳轉具體頁面寂恬，path是為deeplink使用的。StackNavigatorConfig哲银，配有一下參數(shù)：
initialRouteName-默認路由.
initialRouteParams- 初始路由參數(shù)
navigationOptions- navigation參數(shù)
? ? ? ? ?這里的navigation參數(shù)又有：
? ? ? ? ?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,默認轉場動畫就是從底部逐漸顯示到真?zhèn)€屏幕:
headerMode-指定如何渲染頭部玛迄，可以設置為float,screen,none由境。如果設置為none,則不會有頭部；如果設置為float, 頁面跳轉時蓖议，header是一直在頂部虏杰，而且如果header變化了的話，會有動畫勒虾，有點像android的共享動畫纺阔；設置成screen的話，頭部是跟隨這新的頁面重新出現(xiàn)
transitionConfig- 一個函數(shù)類型修然，可以用來配置轉廠動畫.所有動畫都在'react-navigation/src/views/CardStackStyleInterpolator';這里面笛钝，如何設置動畫呢，比如使用左進右出的方式：
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
transitionConfig: (() => ({
? ? ? ?screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}))
onTransitionStart- 函數(shù)類型愕宋，動畫開始后的回調.
onTransitionEnd- 函數(shù)類型玻靡，動畫結束時的回調
const App = StackNavigator({
? ? ?ReactNavigation:{screen:ReactNavigation},
? ? Main: {
? ? ? ?screen: MainScreen,
? ? ? ?path:'kingdom/:Main'
? ?},
? ? ?Profile: {screen: ProfileScreen},
},
{
? ? ?initialRouteName:'ReactNavigation',
? ? ?initialRouteParams :{
? ? ?AppName:'KingdomYrt'
},
? ? ?path:'kingdom/:Index'
});
navigationConfig兩種方式設置：
①靜態(tài)寫死的方式
class MyScreen extends React.Component {
? ? ? static navigationOptions = {
? ? ? title: 'Great',
};
②動態(tài)通過方法配置方式
class ProfileScreen extends React.Component{
static navigationOptions = ({ navigation,screenProps? }) => ({? ?
? ? ? ? ? title:{`Chat with ? ? ? ${navigation.state.params.userName}`},? ??
? ? ? ? ?headerRight: ?{navigation.state.params.setUserName('huanglimei')}} />,
});
這里面就有screenProps就是用于父窗口向子窗口組件傳遞屬性值。我們創(chuàng)建StackNavigator的時候中贝，如果想從外部給屏幕組件傳入擴展的屬性囤捻，可以使用這個屬性，一定是這個屬性邻寿，特別是在TabNavigator中蝎土，子組件和TabNavigator之間的通信就是靠這個來完成。
* screenProps 給StackNavigator傳入該屬性老厌，這個屬性將繼續(xù)傳遞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方法會擦除掉所有的導航狀態(tài)，并且使用內部新的結果替代
import { NavigationActions } from 'react-navigation'
resetActions(){
//這個方法是重置了整個路由棧信息枝秤，那我們要在actions中重新定義路由棧醋拧，下面的的index參數(shù)代表新路由棧默認顯示的頁面
const ?resetAction=NavigationActions.reset({
? ? ? ? ? index:1,
? ? ? ? ?actions:[
? ? ? ? ? ? ? ? ? ?NavigationActions.navigate({routeName:'ReactNavigation'}),
? ? ? ? ? ? ? ? ? ?NavigationActions.navigate({routeName:'profile'})
? ? ? ?]
? })
? ?this.props.navigation.dispatch(resetAction)
}
