本文分兩種push的方式來介紹NavigatorIOS的使用，不過先介紹一下NavigatorIOS的屬性

主要屬性介紹：

initialRoute：包含導(dǎo)航欄中各種屬性設(shè)置{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使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導(dǎo)航條配置。"push"和任何其它的導(dǎo)航函數(shù)的參數(shù)都是這樣的路由對象
barTintColor：設(shè)置導(dǎo)航欄的背景色
itemWrapperStyle：導(dǎo)航器中的組件的默認屬性。一個常見的用途是設(shè)置所有頁面的背景顏色
navigationBarHidden：導(dǎo)航欄是否隱藏true為隱藏
shadowHidden：一個布爾值，決定是否要隱藏1像素的陰影
tintColor：導(dǎo)航欄上按鈕的顏色
titleTextColor：導(dǎo)航器標題的文字顏色
translucent：一個布爾值，決定是否導(dǎo)航條是半透明的
interactivePopGestureEnabled：決定是否啟用滑動返回手勢。不指定此屬性時，手勢會根據(jù)navigationBar的顯隱情況決定是否啟用（顯示時啟用手勢，隱藏時禁用手勢）。指定此屬性后，手勢與navigationBar的顯隱情況無關(guān)

1.第一種情況，使用 導(dǎo)航欄上的按鈕push一個新的新界面

這時候需要設(shè)置導(dǎo)航欄按鈕，然后讓這個按鈕執(zhí)行push的方法
onRightButtonPress為導(dǎo)航欄右側(cè)按鈕，調(diào)用push需要使用this.refs.nav.push的方式，調(diào)用之前必須設(shè)置ref="nav"，pop返回的時候則使用this.refs.nav.pop

render(){
        return (
            //必須設(shè)置ref="nav"
            <NavigatorIOS ref="nav" style = {styles.flex} initialRoute={{
               //設(shè)置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);

附上效果圖：

Untitled5.gif