React Native NavigatorIOS API 使用
通過學(xué)習(xí)React Native的NavigatorIOS發(fā)現(xiàn)官方寫的Demo不便于新手學(xué)習(xí)，現(xiàn)把自己學(xué)習(xí)過程遇到的坑記錄并分享出來。
NavigatorIOS包裝了UIKit的導(dǎo)航功能，可以使用左劃功能來返回到上一界面。
路由
React Navtie通過路由：一個路由是用于描述導(dǎo)航器中一頁的對象。NavigatorIOS的第一個路由通過initialRoute屬性來提供。
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyView,
title: 'My View Title',
passProps: { myProp: 'foo' },
}}
/>
);
}
現(xiàn)在MyView會被導(dǎo)航器渲染出來。它可以通過route屬性獲得對應(yīng)的路由對象，導(dǎo)航器本身，還有所有passProps中傳遞的屬性。
initialRoute兩個必須屬性 ：componenttitle
initialRoute的完整屬性定義：
initialRoute: PropTypes.shape({
/**
* The React Class to render for this route
*/
component: PropTypes.func.isRequired,
/**
* The title displayed in the navigation bar and the back button for this
* route.
*/
title: PropTypes.string.isRequired,
/**
* If set, a title image will appear instead of the text title.
*/
titleImage: Image.propTypes.source,
/**
* Use this to specify additional props to pass to the rendered
* component. `NavigatorIOS` will automatically pass in `route` and
* `navigator` props to the comoponent.
*/
passProps: PropTypes.object,
/**
* If set, the left navigation button image will be displayed using this
* source. Note that this doesn't apply to the header of the current
* view, but to those views that are subsequently pushed.
*/
backButtonIcon: Image.propTypes.source,
/**
* If set, the left navigation button text will be set to this. Note that
* this doesn't apply to the left button of the current view, but to
* those views that are subsequently pushed
*/
backButtonTitle: PropTypes.string,
/**
* If set, the left navigation button image will be displayed using
* this source.
*/
leftButtonIcon: Image.propTypes.source,
/**
* If set, the left navigation button will display this text.
*/
leftButtonTitle: PropTypes.string,
/**
* This function will be invoked when the left navigation bar item is
* pressed.
*/
onLeftButtonPress: PropTypes.func,
/**
* If set, the right navigation button image will be displayed using
* this source.
*/
rightButtonIcon: Image.propTypes.source,
/**
* If set, the right navigation button will display this text.
*/
rightButtonTitle: PropTypes.string,
/**
* This function will be invoked when the right navigation bar item is
* pressed.
*/
onRightButtonPress: PropTypes.func,
/**
* Styles for the navigation item containing the component.
*/
wrapperStyle: View.propTypes.style,
/**
* Boolean value that indicates whether the navigation bar is hidden.
*/
navigationBarHidden: PropTypes.bool,
/**
* Boolean value that indicates whether to hide the 1px hairline
* shadow.
*/
shadowHidden: PropTypes.bool,
/**
* The color used for the buttons in the navigation bar.
*/
tintColor: PropTypes.string,
/**
* The background color of the navigation bar.
*/
barTintColor: PropTypes.string,
/**
* The text color of the navigation bar title.
*/
titleTextColor: PropTypes.string,
/**
* Bboolean value that indicates whether the navigation bar is
* translucent.
*/
translucent: PropTypes.bool,
}).isRequired,
導(dǎo)航器
導(dǎo)航器是一個object，包含了一系列導(dǎo)航函數(shù)，可供視圖調(diào)用。它會作為props傳遞給NavigatorIOS渲染的任何組件。
class MyView extends Component {
_handleBackPress() {
this.props.navigator.pop();
}
_handleNextPress(nextRoute) {
this.props.navigator.push(nextRoute);
}
render() {
const nextRoute = {
component: MyView,
title: 'Bar That',
passProps: { myProp: 'bar' }
};
return(
<TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
<Text style={{marginTop: 200, alignSelf: 'center'}}>
See you on the other nav {this.props.myProp}!
</Text>
</TouchableHighlight>
);
}
}
導(dǎo)航器對象包含如下的函數(shù)：
- push(route) - 導(dǎo)航器跳轉(zhuǎn)到一個新的路由。
- pop() - 回到上一頁。
- popN(n) - 回到N頁之前。當(dāng)N=1的時(shí)候，效果和pop()一樣。
- replace(route) - 替換當(dāng)前頁的路由，并立即加載新路由的視圖。
- replacePrevious(route) - 替換上一頁的路由/視圖。
- replacePreviousAndPop(route) - 替換上一頁的路由/視圖并且立刻切換回上一頁。
- resetTo(route) - 替換最頂級的路由并且回到它。
- popToRoute(route) - 回到某個指定的路由。
- popToTop() - 回到最頂層的路由。
Ref 引用方式獲取NavigatorIOS的導(dǎo)航函數(shù)
導(dǎo)航函數(shù)也可以從NavigatorIOS的子組件中獲得：
從子組件中獲得導(dǎo)航函數(shù)一定要注意，只能通過Ref引用方式。
否則使用this.props.navigator.push() 會未定義對象錯誤
undefined is not an object(evaluationg 'this.props.navigator.push')
具體使用方式
import React, { Component, PropTypes } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
TouchableHighlight,
} from 'react-native';
import FirstScene from './FirstScene';
import SecondScene from './SecondScene';
class MsgIMNavi extends Component{
onFirstRightButtonPress(){
this.refs.navi.push({
title: 'Push View',
component: SecondScene,
passProps: { myProp : 'Pass Value Here' },
barTintColor: '#996699'
});
}
render() {
return (
<NavigatorIOS ref = 'navi'
initialRoute = {{
component: FirstScene,
title: 'First Scene',
rightButtonTitle: 'More',
onRightButtonPress: () => this.onFirstRightButtonPress(),
barTintColor: '#ffffcc',
}}>
</NavigatorIOS>
);
}
}
Demo介紹
Demo有三個文件，分別是index.ios.js FirstScene.js SecondScene.js
- 其中
index.ios.js里進(jìn)行了NavigatorIOS的組件渲染，在導(dǎo)航欄右邊有一個More按鈕，點(diǎn)擊可以Push到SecondScene.js頁面。
NavigatorIOS的initialRoute里的componet：FirstScene（第一個Route組件對象,相當(dāng)于iOS中UINavigationController的rootViewCotroller）。title:'First Scene'。（title可以隨意字符串）。
FirstScene里面有一個Push Me按鈕，點(diǎn)擊可以Push到SecondScene.js頁面。使用NavigatorIOS的主要原因是可以讓原生UINavigationController一樣可以使用左劃功能來返回到上一界面。SecondScece.js里面顯示從上一個頁面?zhèn)鬟^來的值使用this.props.myProp方式來取得。myProp是initialRoute屬性passProps中填寫的Key。
本帖是作者原創(chuàng)，轉(zhuǎn)載請署名（MsgIM）并加上原帖地址。
