先來(lái)看一下示意圖
先來(lái)安利一下官方文檔
還有不錯(cuò)的一個(gè)詳解博客
安裝步驟或者有什么屬性之類的链快，看一下這個(gè)博客和官方文檔，基本差不多了，現(xiàn)在我們來(lái)將跳轉(zhuǎn)和傳值的問(wèn)題拧簸。
跳轉(zhuǎn)
import { StackNavigator } from 'react-navigation';
導(dǎo)入必要的包的是關(guān)鍵。
StackNavigator是用于頁(yè)面跳轉(zhuǎn)的東西男窟。
其次需要導(dǎo)入navigate盆赤。
利用navigate實(shí)現(xiàn)跳轉(zhuǎn)，前面是 ‘xxx’ 你要跳轉(zhuǎn)的名字歉眷，后面是你要傳遞的參數(shù)牺六。
路由：明確跳轉(zhuǎn)的方向。
代碼
const { navigate } = this.props.navigation;
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
Dsome:{screen:Dsome},
});
頁(yè)面效果參考上面的GIF
傳值
代碼中汗捡，我們已經(jīng)向Chat傳遞了user的參數(shù)淑际，那么Chat這個(gè)頁(yè)面該如何接受參數(shù)呢？
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
在navigationOptions 中可以通過(guò)接受一個(gè) navigation 之后通過(guò)navigation.state.params.user來(lái)接受參數(shù)。
而在Render里渲染的時(shí)候春缕，通過(guò)
const { params } = this.props.navigation.state;
來(lái)得到params盗胀。之后直接params.user來(lái)接受參數(shù)。
回調(diào)傳值
在實(shí)際場(chǎng)景中锄贼，第一個(gè)頁(yè)面會(huì)向第二個(gè)頁(yè)面?zhèn)鬟f值票灰，第二個(gè)頁(yè)面會(huì)處理這樣的值，之后將值傳遞給第一個(gè)頁(yè)面宅荤。屑迂。。
這就用到了回調(diào)傳值膘侮。
直接帖代碼
<Button
onPress={()=>navigate('Dsome',{
boom:this.state.boom,
callback: (data)=>{
this.setState({
boom:data,
})
}
}
)}
title="Dsome"
/>
這里我們通過(guò)Button傳值給下一個(gè)頁(yè)面屈糊。。這里琼了，傳遞的值有boom逻锐，還有一個(gè)回調(diào)函數(shù)callback。如果得到的callback雕薪，我們就直接傳給boom這個(gè)state昧诱。
第二個(gè)頁(yè)面的處理也很簡(jiǎn)單。
定義一個(gè)goback方法所袁，之后盏档，const {navigate,goBack,state} = this.props.navigation;這個(gè)是關(guān)鍵。 在第二個(gè)頁(yè)面,在goBack之前,將上個(gè)頁(yè)面的方法取到,并回傳參數(shù),這樣回傳的參數(shù)會(huì)重走render方法
goback(){
const {navigate,goBack,state} = this.props.navigation;
state.params.callback(this.state.boom);
this.props.navigation.goBack();
}
這樣就可以實(shí)現(xiàn)一開(kāi)始的效果圖燥爷，點(diǎn)擊第二個(gè)頁(yè)面蜈亩，回到第一個(gè)頁(yè)面實(shí)現(xiàn)boom的值的改變。
寫(xiě)的如果有不對(duì)的地方前翎，請(qǐng)大神指教
