stack navigator獨有的窗口標(biāo)題狀態(tài)欄
本節(jié)講解如何設(shè)置StackNavigator
StackNavigator 有兩個參數(shù)，routerconfig,navigationconfig。其中，routerconfig配置如下screen頁面配置，可以設(shè)置跳轉(zhuǎn)具體頁面，path是為deeplink使用的。StackNavigatorConfig，配有一下參數(shù)：
initialRouteName-默認(rèn)路由.
initialRouteParams- 初始路由參數(shù)
navigationOptions- navigation參數(shù)
? ? ? ? ?這里的navigation參數(shù)又有：
? ? ? ? ?headerStyle:設(shè)置整個header的樣式，比如：{backgroundColor:"#ff5039"},? ??
? ? ? ? ? headerLeft:,設(shè)置header左半部分，可以有元素組件， ? ?
? ? ? ? ? headerTitle: 設(shè)置header標(biāo)題?,? ?
? ? ? ? ? ?headerTitleStyle:設(shè)置header標(biāo)題樣式,? ??
? ? ? ? ? ?headerRight:, ? ?設(shè)置header右半部分組件，?
? ? ? ? ? ?gesturesEnabled:true，是否支持手勢，Android默認(rèn)是FALSE，iOS是TRUE
paths-覆蓋路由中的path?deeplink使用
Visual options:
mode- 定義渲染的和跳轉(zhuǎn)動畫的風(fēng)格，可以設(shè)置為card,modal。默認(rèn)為card。modal可以使界面跳轉(zhuǎn)的而動畫是從底部逐漸顯示到整個屏幕，這個只對ios有效，因為android,默認(rèn)轉(zhuǎn)場動畫就是從底部逐漸顯示到真?zhèn)€屏幕:
headerMode-指定如何渲染頭部，可以設(shè)置為float,screen,none。如果設(shè)置為none,則不會有頭部；如果設(shè)置為float, 頁面跳轉(zhuǎn)時，header是一直在頂部，而且如果header變化了的話，會有動畫，有點像android的共享動畫；設(shè)置成screen的話，頭部是跟隨這新的頁面重新出現(xiàn)
transitionConfig- 一個函數(shù)類型，可以用來配置轉(zhuǎn)廠動畫.所有動畫都在'react-navigation/src/views/CardStackStyleInterpolator';這里面，如何設(shè)置動畫呢，比如使用左進右出的方式：
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
transitionConfig: (() => ({
? ? ? ?screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}))
onTransitionStart- 函數(shù)類型，動畫開始后的回調(diào).
onTransitionEnd- 函數(shù)類型，動畫結(jié)束時的回調(diào)
const App = StackNavigator({
? ? ?ReactNavigation:{screen:ReactNavigation},
? ? Main: {
? ? ? ?screen: MainScreen,
? ? ? ?path:'kingdom/:Main'
? ?},
? ? ?Profile: {screen: ProfileScreen},
},
{
? ? ?initialRouteName:'ReactNavigation',
? ? ?initialRouteParams :{
? ? ?AppName:'KingdomYrt'
},
? ? ?path:'kingdom/:Index'
});
navigationConfig兩種方式設(shè)置：
①靜態(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方法會擦除掉所有的導(dǎo)航狀態(tài)，并且使用內(nèi)部新的結(jié)果替代
import { NavigationActions } from 'react-navigation'
resetActions(){
//這個方法是重置了整個路由棧信息，那我們要在actions中重新定義路由棧，下面的的index參數(shù)代表新路由棧默認(rèn)顯示的頁面
const ?resetAction=NavigationActions.reset({
? ? ? ? ? index:1,
? ? ? ? ?actions:[
? ? ? ? ? ? ? ? ? ?NavigationActions.navigate({routeName:'ReactNavigation'}),
? ? ? ? ? ? ? ? ? ?NavigationActions.navigate({routeName:'profile'})
? ? ? ?]
? })
? ?this.props.navigation.dispatch(resetAction)
}
