RN 版本：0.50
操作環(huán)境：Windows 10
React Navigation 版本：1.0.0-beta.20文章已同步至 CSDN：http://blog.csdn.net/qq_24867873/article/details/78617509
在上一篇文章《StackNavigator 快速入門》中，介紹了 StackNavigator 的快速使用方法，本篇在其基礎上進行補充戒祠，對 StackNavigator 進行更加詳細的介紹。
StackNavigator 的介紹
我們依然是先寫個首頁用來展示：
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Welcome'
}
render() {
return <Text>Hello, Chat App!</Text>;
}
}
然后通過 StackNavigator 進行注冊：
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
}
});
可以發(fā)現(xiàn)低千，這里設置 title 的方式和上一篇不一樣了。上一篇中栋操，我們在對 HomeScreen 進行注冊的時候進行了 headerTitle 的設置饱亮，就像下面這樣。
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Home'
}
});
而在這篇文章中近上，我們把 navigationOptions 單獨拿了出來寫成了一個靜態(tài)變量。這種寫法也是可以的壹无，當通過 StackNavigator 加載到 Home 頁面的時候，會自動找到這個變量讀取它的各個參數(shù)并應用在 Home 頁面上斗锭。就像組件的生命周期剛開始的時候會先讀取 static defaultProps 中的默認屬性。
另外在這里 headerTitle 與 title 的效果是一樣的帮毁，都是頂部 ‘ToolBar’ 的標題。它們兩個具體有什么區(qū)別烈疚，打算在下一篇文章再做介紹。效果圖直接用官網的聪轿。
添加一個新的頁面
這個在上一篇文章也已經說過了，如果你看過上一篇文章陆错，這里隨便看看就好了。
我們新建一個 ChatScreen 頁面：
export default class ChatScreen extends Component {
static navigationOptions = {
title: 'Chat with Lucy',
}
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
然后在 HomeScreen 中添加一個按鈕使其被點擊的時候能跳轉到 ChatScreen音瓷。這里我們就要用到 navigate 方法并且給它填入正確的 routeName 參數(shù)，我們這里定義的是 Chat 猪半。
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Welcome'
};
render() {
const {navigate} = this.props.navigation;
return <View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
}
}
當然了兔朦，最最重要的不要忘記了在 StackNavigator 中進行注冊：
const RootNavigator = StackNavigator({
Home: {screen: HomeScreen},
Chat: {screen: ChatScreen}
});
現(xiàn)在磨确，我們點擊按鈕就可以進行頁面之間的切換了。
傳遞參數(shù)
任何頁面之間的切換都避免不了參數(shù)的傳遞摆舟。還記得 navigate(routeName, params, action) 方法的第二個參數(shù)嗎邓了？params 就是要傳遞的參數(shù)。
render() {
const {navigate} = this.props.navigation;
return <View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', {user: 'Lucy'})}
title="Chat with Lucy"
/>
</View>
}
這里我們給 ChatScreen 傳遞了一個值為 'Lucy' 的字符串 user照宝，然后就可以通過 this.props.navigation.state.params 來取到你想要的參數(shù)。
export default class ChatScreen extends Component {
// Nav options can be defined as a function of the screen's props:
// Nav options 可以被定義成一個頁面屬性的函數(shù)（原諒我英語太差）
// 格式就像下面這樣厕鹃，你就可以取到 navigation 了
static navigationOptions = ({navigation}) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
// 屏幕當前的路由被傳遞給了 `props.navigation.state`
const {params} = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
你可以改一下 user 的值乍丈，然后看看有什么變化。
本文到此結束轻专，下一篇打算詳細寫寫 StackNavigator 的各個屬性。
