重新排版 理解navigator
這是一個(gè)簡(jiǎn)單的例子夭坪，用Navigator來跳轉(zhuǎn)頁面雏婶，頁面之間傳遞參數(shù) (代碼是ES6語法寫的):
import React,{
View,
Navigator
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}
這里來解釋一下代碼:
第三行: 一個(gè)初始首頁的component名字，比如我寫了一個(gè)component叫HomeComponent橡庞，那么這個(gè)name就是這個(gè)組件的名字【HomeComponent】了较坛。
第四行: 這個(gè)組件的Class，用來一會(huì)兒實(shí)例化成 <Component />標(biāo)簽
第七行:
`initialRoute={{ name: defaultName, component: defaultComponent }}
這個(gè)指定了默認(rèn)的頁面扒最，也就是啟動(dòng)app之后會(huì)看到界面的第一屏丑勤。 需要填寫兩個(gè)參數(shù): name 跟 component。
第八吧趣，九法竞，十行:
configureScene={() => {return Navigator.SceneConfigs.VerticalDownSwipeJump;}}
這個(gè)是頁面之間跳轉(zhuǎn)時(shí)候的動(dòng)畫除呵，具體有哪些？可以看這個(gè)目錄下爪喘，有源代碼的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
最后的幾行:
renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }} /> );
(這是也默認(rèn)自定義的route，內(nèi)部內(nèi)容可以自行擴(kuò)展纠拔，在renderScene中接收也是這個(gè)秉剑，如果在其他js中使用navigator.push方式進(jìn)行頁面切換，則內(nèi)容的id要與此保持一致 ,每一次頁面切換都會(huì)重新調(diào)用一次renderScene`) - id指 initialRoute中的 name 與 component
這里是每個(gè)人最疑惑的稠诲，我們先看到回調(diào)里的兩個(gè)參數(shù):route, navigator侦鹏。通過打印我們發(fā)現(xiàn)route里其實(shí)就是我們傳遞的name,component這兩個(gè)貨，navigator是一個(gè)Navigator的對(duì)象臀叙，為什么呢略水，因?yàn)樗衟ush pop jump...等方法，這是我們等下用來跳轉(zhuǎn)頁面用的那個(gè)navigator對(duì)象劝萤。
return <Component {...route.params} navigator={navigator} />
這里有一個(gè)判斷渊涝，也就是如果傳遞進(jìn)來的component存在，那我們就是返回一個(gè)這個(gè)component床嫌，結(jié)合前面 initialRoute 的參數(shù)跨释，我們就是知道，這是一個(gè)會(huì)被render出來給用戶看到的component厌处，然后navigator作為props傳遞給了這個(gè)component鳖谈。
所以下一步，在這個(gè)FirstPageComponent里面阔涉，我們可以直接拿到這個(gè) props.navigator:
import React,{
View,
Text,
TouchableOpacity
} from 'react-native';
import SecondPageComponent from './SecondPageComponent';
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
//為什么這里可以取得 props.navigator?請(qǐng)看上文:
//<Component {...route.params} navigator={navigator} />
//這里傳遞了navigator作為props
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
})
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>點(diǎn)我跳轉(zhuǎn)</Text>
</TouchableOpacity>
</View>
);
}
}
這個(gè)里面創(chuàng)建了一個(gè)可以點(diǎn)擊的區(qū)域缆娃，讓我們點(diǎn)擊可以跳到SecondPageComponent這個(gè)頁面，實(shí)現(xiàn)頁面的跳轉(zhuǎn)」迮牛現(xiàn)在來創(chuàng)建SecondPageComponent贯要，并且讓它可以再跳回FirstPageComponent:
import React, {
View,
Text,
TouchableOpacity,
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//很熟悉吧，入棧出棧~ 把當(dāng)前的頁面pop掉凶伙，這里就返回到了上一個(gè)頁面:FirstPageComponent了
navigator.pop();
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>點(diǎn)我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}
大功告成郭毕，能進(jìn)能出了。
關(guān)于官方文檔里有個(gè)東西函荣，這里說一下:
- getCurrentRoutes() - 獲取當(dāng)前棧里的路由显押，也就是push進(jìn)來，沒有pop掉的那些
- jumpBack() - 跳回之前的路由傻挂，當(dāng)然前提是保留現(xiàn)在的乘碑，還可以再跳回來，會(huì)給你保留原樣金拒。
- jumpForward() - 上一個(gè)方法不是調(diào)到之前的路由了么兽肤，用這個(gè)跳回來就好了
- jumpTo(route) - Transition to an existing scene without unmounting
- push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
- pop() - Transition back and unmount the current scene
- replace(route) - Replace the current scene with a new route
- replaceAtIndex(route, index) - Replace a scene as specified by an index
- replacePrevious(route) - Replace the previous scene
- immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
- popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
- popToTop() - Pop to the first scene in the stack, unmounting every other scene
這些都是navigator可以用的public method,就是跳轉(zhuǎn)用的套腹，里面有些帶參數(shù)的XXX(route)，新手第一次看這個(gè)文檔會(huì)疑惑资铡，這個(gè)route參數(shù)是啥呢电禀，這個(gè)route就是:renderScene={(route, navigator) =>這里的route，最基本的route就是:var route = { component: LoginComponent}
這種格式笤休。這個(gè)地方有點(diǎn)模糊的尖飞，在這里先說清楚了。
然后下面要討論店雅，怎么傳遞參數(shù)過去政基，或者從對(duì)方獲取參數(shù)。
傳遞參數(shù)闹啦，通過push就可以了沮明。
比如在一個(gè) press的事件里:
//FirstPageComponent.js
import React, {
View,
Text,
TouchableOpacity
} from 'react-native';
import SecondPageComponent from './SecondPageComponent';
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: 2
};
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
//這里多出了一個(gè) params 其實(shí)來自于<Navigator 里的一個(gè)方法的參數(shù)...
params: {
id: this.state.id
}
});
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>點(diǎn)我跳轉(zhuǎn)并傳遞id</Text>
</TouchableOpacity>
</View>
);
}
}
params的來歷:
// index.ios.js
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component) {
//這里有個(gè) { ...route.params }
return <Component {...route.params} navigator={navigator} />
}
}} />
這個(gè)語法是把 routes.params 里的每個(gè)key 作為props的一個(gè)屬性:
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id
}
});
這里的 params.id 就變成了 <Navigator id={} 傳遞給了下一個(gè)頁面。所以 SecondPageComponent就應(yīng)該這樣取得 id：
//SecondPageComponent.js
import React,{
View,
Text,
TouchableOpacity,
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: null
}
}
componentDidMount() {
//這里獲取從FirstPageComponent傳遞過來的參數(shù): id
this.setState({
id: this.props.id
});
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
}
render() {
return (
<View>
<Text>獲得的參數(shù): id={ this.state.id }</Text>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>點(diǎn)我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}
這樣在頁面間傳遞的參數(shù)窍奋，就可以獲取了荐健。
