react-navigation 簡介
阿新 • • 發佈:2018-03-27
tor 方式 一個 justify 深度 哪些 區別 view avi
StackNavigator:
原理和瀏覽器相似但又有局限,瀏覽器的方式是開放性的,通過點擊一個鏈接可以跳轉到任何頁面(push),
點擊瀏覽器後退按鈕,返回到前一個頁面(pop)。
StackNavigator也就是一個路由棧, 這個路由棧的原理和瀏覽器一樣,跳轉到一個新頁面 push,返回就是pop,
有一個明顯的區別是,瀏覽器中的鏈接有無數個,點擊就可以跳轉,不需要實現聲明有哪些鏈接。
在StackNavigator中,必須事先聲明這個app中有哪些頁面(對應瀏覽器中的鏈接),你不能跳轉到一個沒有事先聲明的
頁面(即便這個頁面在app中存在)。聲明的第一個頁面默認進入路由棧。
簡單用法:
import { StackNavigator } from ‘react-navigation‘; import Page1 from‘./page1‘ import Page2 from ‘./page2‘ import Page3 from ‘./page3‘ export default StackNavigator({ //聲明列表: //路由名:{頁面:頁面組件} Page1: { screen: Page1}, Page2: { screen: Page2}, Page3: { screen: Page3} },{/*其他的配置*/});
所有在 StackNavigator 中聲明的頁面,都自動綁定了一個 navigation 屬性,
navigation是一個對象,包含很多方法和屬性,常用的 就是跳轉到新頁面和返回:
class Page1 extends Component { render() { return ( <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}> <Text>Page2 Screen</Text> <Button title="Go to Page2... again" //跳轉到Page2頁面 onPress={() => this.props.navigation.navigate(‘Page2‘)} /> <Button title="Go back" //返回上一個頁面 onPress={() => this.props.navigation.goBack()} /> </View> ); } }
跳轉頁面是可以附帶參數的,比如:
this.props.navigation.navigate(‘Page2‘,{name:‘lisa‘,age:28})
在Page2頁面可以通過 this.props.navigation.state.params.name獲取對應的值
有些沒有在 StackNavigator 中聲明的組件頁面,無法獲取到 navigation 屬性,想要
使用 navigation 有兩個辦法,通過父組件傳遞 navigation 屬性,還可以通過下面這種方式:
import { withNavigation } from ‘react-navigation‘; class MyBackButton extends React.Component { render() { return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />; } } export default withNavigation(MyBackButton);
StackNavigator 深度連接 (在瀏覽器或者其他app中通過url鏈接喚醒 app到指定頁面)
文檔介紹:https://reactnavigation.org/docs/deep-linking.html
react-navigation 簡介