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
的各個屬性。