React Native－7.React Native NavigatorIOS组件详解

老样子，先上图：

图也看了，先听老王给你讲讲政治课

NavigatorIOS 是RN中的一个组件

既然是一个组件，那么他就有一堆属性来完成不同的需求：

属性讲解

• barTintColor : 导航条的背景颜色
• initalRoute : 在RN 中导航名为“路由”（学过网络的应该明白这个词的意思）,作用就是指路的，大家可以这么理解，这个属性是一个方法，用来初始化导航的。
• itemWrapperStyle : 为每一项定制样式，例如设置每一个页面的背景颜色
• navigationBarHidden : 为true,隐藏导航栏。
• shadowHidden : 是否隐藏阴影，true／false。
• tintColor : 导航栏上按钮的颜色设置。
• titleTextColor : 导航栏上字体的颜色 。
• translucent : 导航栏是否是半透明的，true／false。
• push(route) : 加载一个新的界面（视图或者路由）并且路由到该界面。
• pop() : 返回到上一个页面。
• popN(n) : 一次性返回N个界面，当n ＝ 1 时，即相当于pop（）方法的效果。
• replace（route）：替换当前的路由。
• replacePrevious(route) : 替换前一个页面的视图并且回退过去。
• resetTo(route) : 取代最顶层的路由并且回退过去。
• popToTop() : 回到最上层视图。

废话少说。上干货

'use strict';
var React = require('react-native');
var NextPage = require('./iOSFile/nextPage.js')
var {
  AppRegistry,StyleSheet,Text,View,PixelRatio,NavigatorIOS,ScrollView,} = React;

var 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',}

})



var List = React.createClass({
    render:function(){
        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}>✨ 过年逼婚，我草了！！</Text>
            </ScrollView>
        );
    },goTo: function(){
    this.props.navigator.push({
        component:NextPage,title:'过年详情',rightButtonTitle:'全是教导',onRightButtonPress:function(){
            alert('你妈催你找媳妇儿');
        }
    });
}
})

var Detail = React.createClass({
    render:function(){
        return(
            <ScrollView style = {styles.scrollViewTop}>
                <Text style = {styles.list_item,styles.detail_text}>详情页</Text>
                <Text style = {styles.list_item}>测试页面</Text>
            </ScrollView>
        );
    }
})

var wxsPrj = React.createClass({
  render: function() {
    return (
        <NavigatorIOS style = {styles.flex} initialRoute = {{
                component: List,title: '过年也不好',passProps:{},}}/>
        );
    }
})

AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

nextPage 代码：

var React = require('react-native')

var {
    AppRegistry,}= React;

var NextPage = React.createClass({
    render:function(){
        return(
            <ScrollView style= {styles.flex}>
                <Text style = {styles.titleFont}>过年回家</Text>
                <Text style = {styles.titleFont}>常回家看看</Text>
            </ScrollView>
        )
    }

})

var styles = StyleSheet.create({
    flex: {
        flex:1,titleFont: {
        fontSize: 20,color: '#ddd',textAlign: 'center',})

module.exports = NextPage;

代码详解：

<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}>✨ 过年逼婚，我草了！！</Text>
            </ScrollView>

我们可以看到每一个 ScrollView中的标签都添加一个触摸方法，goTo()，定义如下：

goTo: function(){
    this.props.navigator.push({
        component:NextPage,onRightButtonPress:function(){
            alert('你妈催你找媳妇儿');
        }
    });

goTo（）里边的功能：
使用点语法，调用到全局对象navigator，并调用push方法，设置push的下一页为NextPage，onRightButtonPress:是一个方法，里边调用的是alert方法。
可以看出，我们这里调用的navigator完全相当于iOS原生的navigation bar

来看一下我们的爱情动作片：