react native之Navigation和NavigationIOS

前言

在开发中，我们需要实现多个界面的切换，这时候就需要一个导航控制器来进行各种效果的切换。那么，在React Native中有两个组件能够实现这样的效果：Navigator和NavigatorIOS。
其中Navigator是适配Android和iOS，而NavigatorIOS则是包装了UIKit的导航功能，可以使用左划功能来返回到上一界面
使用之前记得引入组建
通常都是放在ReactNative工程的入口--index.ios.js/index.android.js中

一、Navigator(你还可能在很多地方听说过Navigator，这个老组件会逐步被React Navigation替代)

很多时候，我们需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是 renderScene 方法，根据指定的路由来渲染。
所有js拿到导航都是this.props.navigator
注意：在RN0.44之上的版本中，Navigator组件已经移植到react-native-deprecated-custom-components中

如果你需要继续使用Navigator，则需要先yarn add react-native-deprecated-custom-components.所以要遵循以下引入方式：

import {Navigator} from 'react-native-deprecated-custom-components';

1.1 常用的属性

initialRoute ={{

name: 'home',

component: HomeScene,

passProps:{key:value} //跳转传值，接收页面获取this.props.key

}}
这个指定了默认的页面，默认路由，也就是启动的组件页面。initialRoute里面是一个route

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路由栈
具体是方法如下:
```
renderScene={(route,navigator) => {
        let Component = route.component;  //固定写法
        return <Component {...route.props} navigator={navigator} title={route.title} />   //固定写法,注意这个点点点是ES6一个写法
    }}
```
两个参数中的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 默认的写法

<Navigator
   initialRoute={{
      name:'商家',component:ShopView
   }}
   configureScene={()=>{
             return Navigator.SceneConfigs.PushFromRight;
   }}
   renderScene={(route,navigator)=>{
     let Component=route.component;
         return <Component {...route.passProps} navigator={navigator}/>
   }}
/>

//跳转到二级界面
    pushToDetail(){
        this.props.navigator.push({
            name:"首页详情",component:HomeDetail
        })
    }

//返回到首页
    popToHome(){
        this.props.navigator.pop()  //返回页面，并且卸载删除当前的页面
    }

所有子组件拿到navigator都是this.props.navigator。如果是navigator注册的当前组件要跳转要用ref获取navigator.

Navigator代码:

import React,{ Component } from 'react';
import {
    AppRegistry,StyleSheet,Text,View,Image,Platform,//判断当前运行的系统
} from 'react-native';

//导入组件类
import TabNavigator from 'react-native-tab-navigator';
import { Navigator } from 'react-native-deprecated-custom-components';

//引入其他页面类
var HomeView=require("../Home/Home");
var MoreView=require("../More/More");
var MyView=require("../My/My");
var ShopView=require("../Shop/Shop");

var  Main=React.createClass({
    getInitialState(){
        console.log(Platform)
        return{
            //默认的TabBar
            selectedTab:"home"
        }
    },render() {
        return (
            <TabNavigator>
                {/*首页*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'home'}
                    title="首页"
                    renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage"}} />}
                    renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage_selected"}} />}
                    onPress={() => this.setState({ selectedTab: 'home' })}
                    selectedTitleStyle={{color:"#dd4822"}}
                >
                   <Navigator
                    initialRoute={{
                        name:'首页',component:HomeView
                    }}
                    configureScene={()=>{
                        return Navigator.SceneConfigs.PushFromRight;
                    }}
                    renderScene={(route,navigator)=>{
                        let Component=route.component;
                        return <Component {...route.passProps} navigator={navigator}/>
                    }}
                   />
                </TabNavigator.Item>


                {/*商家*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'Shop'}
                    title="商家"
                    onPress={() => this.setState({ selectedTab: 'Shop' })}
                    renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_merchant_normal"}} />}
                    renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_merchant_selected"}} />}
                    selectedTitleStyle={{color:"#dd4822"}}
                >

                    <Navigator
                        initialRoute={{
                            name:'商家',component:ShopView
                        }}
                        configureScene={()=>{
                            return Navigator.SceneConfigs.PushFromRight;
                        }}
                        renderScene={(route,navigator)=>{
                            let Component=route.component;
                            return <Component {...route.passProps} navigator={navigator}/>
                        }}
                    />
                </TabNavigator.Item>


                {/*我的*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'My'}
                    title="我的"
                    onPress={() => this.setState({ selectedTab: 'My' })}
                    renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_misc"}} />}
                    renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_misc_selected"}} />}
                    selectedTitleStyle={{color:"#dd4822"}}
                >
                    <Navigator
                        initialRoute={{
                            name:'我的',component:MyView
                        }}
                        configureScene={()=>{
                            return Navigator.SceneConfigs.PushFromRight;
                        }}
                        renderScene={(route,navigator)=>{
                            let Component=route.component;
                            return <Component {...route.passProps} navigator={navigator}/>
                        }}
                    />
                </TabNavigator.Item>


                {/*更多*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'More'}
                    title="更多"
                    onPress={() => this.setState({ selectedTab: 'More' })}
                    renderIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage"}} />}
                    renderSelectedIcon={() => <Image style={styles.tabIconHome} source={{uri:"icon_tabbar_homepage_selected"}} />}
                    selectedTitleStyle={{color:"#dd4822"}}
                >
                    <Navigator
                        initialRoute={{
                            name:'更多',component:MoreView
                        }}
                        configureScene={()=>{
                            return Navigator.SceneConfigs.PushFromRight;
                        }}
                        renderScene={(route,navigator)=>{
                            let Component=route.component;
                            return <Component {...route.passProps} navigator={navigator}/>
                        }}
                    />
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
});

const styles = StyleSheet.create({
    tabIconHome:{
        width:Platform.OS==="ios"?30:25,height:Platform.OS==="ios"?30:25
    }
});

module.exports=Main;

二、Navigator.IOS

NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。

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

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

//导入新闻详情页
var XMGNewsDetail=require("./XMGNewsDetail");

//在新闻详情页面直接
this.props.rowData 来获取参数

通过导航进行跳转

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

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

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

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

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

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

作者：旋之华链接：http://www.jianshu.com/p/e1bfbe164010 來源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

react native之Navigation和NavigationIOS

前言

一、Navigator(你还可能在很多地方听说过Navigator，这个老组件会逐步被React Navigation替代)

二、Navigator.IOS

猜你在找的React相关文章