> 頭部只只適用于StackNavigator組件。
**1.傳值**
在前面例子中,我們創建了類似聊天 app的一個StackNavigator。切換卡左側是好友列表,右側是最近聊天。
現在我們點擊一個好友,出現聊天界面,并且聊天界面中有從列表中傳遞過來的參數。
如下的方式可以實現:
`this.props.navigation.navigate('Chat', { user: 'Lucy' });`
我們知道 通過props給父組件設置一個值,子組件就可以接收到值。
~~~
class ChatScreen extends React.Component {
render() {
const { params } = this.props.navigation.state;
return <Text>Chat with {params.user}</Text>;
}
}
~~~
OK!!這樣就完成了傳值。
* * * * *
**2.設置頭部標題**
設置屏幕頭部參數。
~~~
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
}
~~~
* * * * *
**3.為頭部右側添加一個按鈕,比如返回,詳情等**
然后,我們可以添加一個標題導航選項,讓我們可以添加自定義的右按鈕。
~~~
static navigationOptions = ({ navigation }) => {
const {state, setParams} = navigation;
const isInfo = state.params.mode === 'info';
const {user} = state.params;
return {
title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
headerRight: (
<Button
title={isInfo ? 'Done' : `${user}'s info`}
onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
/>
),
};
};
~~~