React Native中Navigator和NavigatorIOS

/ 0评 / 0赞

做iOS开发的都知道，iOS中除了tabbar这个基础容器外还有另一个常用的基础容器，就是Navigation，而React Native也将这个容器控件给封装了，Navigator和NavigatorIOS配合就能实现

一、Navigator

1.1 常用的属性

 initialRoute ={{ name: 'home', component: HomeScene }}

这个指定了默认的页面，也就是启动的组件页面

configureScene ={() => {
    return Navigator. SceneConfigs .HorizontalSwipeJump;
}}

页面之间跳转时候的动画手势，可以看这个目录:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)

比如：PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等。

renderScene 具体是方法如下:

(route, navigator) =>

两个参数中的route包含的是initial的时候传递的name和component，而navigator是一个我们需要用的Navigator的对象；
所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件HomeScene才可以通过 this.props.navigator，拿到路由。

initialRouteStack [object] 参数对象数组
这是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组

navigationBar node
该为可选的参数，在页面切换中用来提供一个导航栏

navigator object
该为可选参数，可以从父类导航器中获取导航器对象

sceneStyle 样式风格
该继承了View视图的所有样式风格，用于设置每个页面容器的风格

1.2 常用的导航器方法

当获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:

getCurrentRoutes() 该进行返回存在的路由列表信息

jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面

jumpForward() 进行跳转到相当于当前页面的下一个页面

jumpTo(route) 根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)

push(route) 导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去

pop() 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面

replace(route) 只用传入的路由的指定页面进行替换掉当前的页面

replaceAtIndex(route,index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面

replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面

resetTo(route) 进行导航到新的界面，并且重置整个路由栈

immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈

popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除

popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

1.3 默认写法

 {
        return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
    }}
    renderScene={(route, navigator) => {
        let Component = route.component;
        return 
    }}
/>

二、Navigator.IOS

2.1 常用的导航器方法

push(route)
导航器跳转到一个新的路由。

pop()
回到上一页。

popN(n)
回到N页之前。当N=1的时候，效果和 pop() 一样。

replace(route)
替换当前页的路由，并立即加载新路由的视图。

replacePrevious(route)
替换上一页的路由/视图。

replacePreviousAndPop(route)
替换上一页的路由/视图并且立刻切换回上一页。

resetTo(route)
替换最顶级的路由并且回到它。

popToRoute(route)
一直回到某个指定的路由。

popToTop()
回到最顶层的路由。

2.2 常用的属性

barTintColor string
导航条的背景颜色。

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"和任何其它的导航函数的参数都是这样的路由对象。

比如：下面新闻列表跳转到新闻详情页详情页：

 //跳转到新闻详情
pushToNewsDetail(rowData){
     this.props.navigator.push({
        title:'新闻详情',
        component:DCNewsDetail,
        passProps:{rowData}
     });
}

itemWrapperStyle View#style
导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。

navigationBarHidden bool
一个布尔值，决定导航栏是否隐藏。

shadowHidden bool
一个布尔值，决定是否要隐藏1像素的阴影。

tintColor string
导航栏上按钮的颜色。

titleTextColor string
导航器标题的文字颜色。

translucent bool
一个布尔值，决定是否导航条是半透明的

三、示例

来看个小例子

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    NavigatorIOS
} from 'react-native';

//引入外部组件
var Home = require('./DCHome');
var Find = require('./DCFind');
var Message = require('./DCMessage');
var Mine = require('./DCMine');

var Main = React.createClass({
    //初始化方法
    getInitialState(){
        return{
            //设置选中标识
            selectedItem : "home" //默认首页被选中
        }
    },


    render() {
        return (
            
                {/*首页*/}
                {this.setState({selectedItem:'home'})}}
                >
                    
                
                {/*发现*/}
                {this.setState({selectedItem:'find'})}}
                >
                    
                
                {/*消息*/}
                {this.setState({selectedItem:'message'})}}
                >
                    
                
                {/*我的*/}
                {this.setState({selectedItem:'mine'})}}
                >
                    
                
            
        );
    }
})

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

//输出类
module.exports = Main;

来看看最后的效果

评论已关闭。