React-Native 学习NavigatorIOS

本文分两种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"和任何其它的导航函数的参数都是这样的路由对象
barTintColor：设置导航栏的背景色
itemWrapperStyle：导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色
navigationBarHidden：导航栏是否隐藏true为隐藏
shadowHidden：一个布尔值，决定是否要隐藏1像素的阴影
tintColor：导航栏上按钮的颜色
titleTextColor：导航器标题的文字颜色
translucent：一个布尔值，决定是否导航条是半透明的
interactivePopGestureEnabled：决定是否启用滑动返回手势。不指定此属性时，手势会根据navigationBar的显隐情况决定是否启用（显示时启用手势，隐藏时禁用手势）。指定此属性后，手势与navigationBar的显隐情况无关

1.第一种情况，使用 导航栏上的按钮push一个新的新界面

这时候需要设置导航栏按钮，然后让这个按钮执行push的方法
onRightButtonPress为导航栏右侧按钮，调用push需要使用this.refs.nav.push的方式，调用之前必须设置ref="nav"，pop返回的时候则使用this.refs.nav.pop

render(){
        return (
            //必须设置ref="nav"
            {
                    //这里需要使用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一个新的界面：

当前界面的按钮调用以下方法，使用其属性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 (
            {
                    this.refs.nav.push({
                        component: NextView,
                        title: '第二个界面',
                        rightButtonTitle: '可爱  ',
                        onRightButtonPress: () => {
                            // alert('歇息')
                            this.refs.nav.pop({
                                // title: '返回',
                            });
                        }
                    })
                }
            }}/>
        );
    }
}

class MainView extends Component {
    render() {
        return(
            
                 广德县
                 宁国市
                 杨滩镇
            
        )
    }

    goTo = () => {
        this.props.navigator.push({
            component: NextView,
            title: '第二个界面',
            rightButtonTitle: '可爱  ',
            onRightButtonPress: () => {
                // alert('歇息')
                this.props.navigator.pop({
                    // title: '返回',
                });
            }
        })
    }
}

class NextView extends Component {
    render(){
        return(
            

            
        )
    }
}

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