本文分兩種push的方式來介紹NavigatorIOS的使用，不過先介紹一下NavigatorIOS的屬性
主要屬性介紹：
initialRoute：包含導航欄中各種屬性設置{component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]} NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性曙砂、以及導航條配置。"push"和任何其它的導航函數(shù)的參數(shù)都是這樣的路由對象
barTintColor：設置導航欄的背景色
itemWrapperStyle：導航器中的組件的默認屬性肛冶。一個常見的用途是設置所有頁面的背景顏色
navigationBarHidden：導航欄是否隱藏true為隱藏
shadowHidden：一個布爾值敷扫，決定是否要隱藏1像素的陰影
tintColor：導航欄上按鈕的顏色
titleTextColor：導航器標題的文字顏色
translucent：一個布爾值，決定是否導航條是半透明的
interactivePopGestureEnabled：決定是否啟用滑動返回手勢顿苇。不指定此屬性時，手勢會根據(jù)navigationBar的顯隱情況決定是否啟用（顯示時啟用手勢税弃，隱藏時禁用手勢）纪岁。指定此屬性后，手勢與navigationBar的顯隱情況無關(guān)
1.第一種情況则果，使用 導航欄上的按鈕push一個新的新界面
這時候需要設置導航欄按鈕幔翰，然后讓這個按鈕執(zhí)行push的方法
onRightButtonPress為導航欄右側(cè)按鈕，調(diào)用push需要使用this.refs.nav.push的方式西壮，調(diào)用之前必須設置ref="nav"遗增，pop返回的時候則使用this.refs.nav.pop
render(){
return (
//必須設置ref="nav"
<NavigatorIOS ref="nav" style = {styles.flex} initialRoute={{
//設置NavigatorIOS的rootView界面
component: MainView,
title: '太遠了不好',
passProps: {},
rightButtonTitle: '你猜 ',
onRightButtonPress: ()=>{
//這里需要使用this.refs.nav.push
this.refs.nav.push({
//下面是push的新界面NextView
component: NextView,
title: 'NextPage',
rightButtonTitle: '可愛 ',
onRightButtonPress: () => {
// alert('歇息')
//這里需要使用this.refs.nav.pop
this.refs.nav.pop({
});
}
})
}
}}/>
);
}
2.第二種情況：使用界面上的按鈕push一個新的界面：
當前界面的按鈕調(diào)用以下方法，使用其屬性this.props.navigator.push的方式push界面款青，pop返回使用this.props.navigator.pop
goTo = () => {
//界面上按鈕push需要使用this.props.navigator.push
this.props.navigator.push({
component: NextView,
title: 'NextPage',
rightButtonTitle: '可愛 ',
onRightButtonPress: () => {
// alert('歇息')
//需要使用this.props.navigator.pop
this.props.navigator.pop({
});
}
})
}
以下為完整代碼
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
ScrollView,
NavigatorIOS
} from 'react-native';
export default class Navc extends Component {
render(){
return (
<NavigatorIOS ref="nav" style = {styles.flex} initialRoute={{
component: MainView,
title: '太遠了不好',
passProps: {},
rightButtonTitle: '你猜 ',
onRightButtonPress: ()=>{
this.refs.nav.push({
component: NextView,
title: '第二個界面',
rightButtonTitle: '可愛 ',
onRightButtonPress: () => {
// alert('歇息')
this.refs.nav.pop({
// title: '返回',
});
}
})
}
}}/>
);
}
}
class MainView extends Component {
render() {
return(
<ScrollView style={[styles.flex, styles.scrollViewTop]}>
<Text style = {styles.list_item} onPress = {this.goTo}> 廣德縣</Text>
<Text style = {styles.list_item} onPress = {this.goTo}> 寧國市</Text>
<Text style = {styles.list_item} onPress = {this.goTo}> 楊灘鎮(zhèn)</Text>
</ScrollView>
)
}
goTo = () => {
this.props.navigator.push({
component: NextView,
title: '第二個界面',
rightButtonTitle: '可愛 ',
onRightButtonPress: () => {
// alert('歇息')
this.props.navigator.pop({
// title: '返回',
});
}
})
}
}
class NextView extends Component {
render(){
return(
<View style={[styles.flex, {backgroundColor: '#ff33dd'}, {alignItems: 'center'}, {justifyContent: 'center'}]}>
</View>
)
}
}
const styles = StyleSheet.create({
flex: {
flex:1,
},
scrollViewTop : {
marginTop: 20,
},
list_item: {
color: '#333',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 15,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
detail_text: {
textAlign: 'center',
}
});
AppRegistry.registerComponent('Navc', () => Navc);
附上效果圖：
