ReactNative: 使用导航栏组件-NavigatorIOS组件和Navigator组件

其他 2019-12-12 15:34:08 阅读次数: 0

一、简言

在软件开发中，不论是Web还是App，它们的应用程序都是由很多的功能视图组成的。对于这些组合的视图，如何实现页面间平滑地过渡，应用都有统一的一套跳转机制，这个功能就是路由或者叫导航。应用程序通过导航，可以自由地实现页面之间的切换、前进和后退。在React中使用的是React Router，在iOS中使用的是UIKit的导航视图UINavigation和导航控制器。而在React-Native中，也提供了专门切换视图的导航栏组件NavigatorIOS和Navigator，这两个是兄弟组件，功能基本相同，区别在于封装性高低。NavigatorIOS组件的封装程度更高提供了基础的API和属性，开发者可以很方便的定制一个功能丰富的导航栏，而Navigator组件相比较而言比较简陋，它提供了足够的空间让开发者去定制，对于复杂的导航栏，它定制能力更高，而且可跨平台使用。其实，NavigatorIOS组件本质上是对UIKit的UINavigation的包装，使用NavigatorIOS组件进行页面的切换实质上就是调用了UIKit原生导航功能。本文将一一研究。

二、navigator对象

在组件视图进行切换的时候，navigator会作为一个属性对象被传递。我们可以通过this.props.navigator获取navigator对象。掌握navigator对象是使用NavigatorIOS组件和Navigator组件的前提基础，因为它可以控制器路由的跳转和组件的加载。navigator对象的主要API如下：

//加载一个新的页面或者视图或者路由，并跳转到该页面
push(route)

//返回到上一个页面
pop()

//一次性返回N个页面，也即返回到指定页面，当N=1，与pop()相同
popN(n)

//替换当前的路由
replace(route)

//替换前一个页面的视图并且回退过去
replacePrevious(route)

//取代最顶层的路由并且回退回去
resetTo(route)

//回到最顶层视图
popToTop()

三、NavigatorIOS组件

1、路由initialRoute默认是一个JS对象，代表一个页面或者视图，NavigatorIOS组件默认路由提供了initialRoute属性，如下所示：

import React, { Component } from 'react';
import {
    NavigatorIOS
} from 'react-native';

export default class NavigatorBar extends Component{
    
    render(){
        return (
            <NavigatorIOS
                initialRoute={{
                    component: MyComponent,
                    title: "MyComponent Title",
                    passProps: {myProp:"XYQ"}    
                }}
            />
        );
    }
}

//component :  表示当前页面需要加载的组件视图
//title: 表示需要显示的标题
//passProps：表示用于页面间传递数据

2、NavigatorIOS组件属性有两大部分，分别是自身属性和持有的路由的属性，如下所示：

自身属性：

//导航条的背景颜色
barTintColor

//初始化路由，它是一个JavaScript对象
initialRoute

//每一页定制样式，可以设置每一个页面的背景颜色
itemWrapperStyle

//是否隐藏导航栏
navigationBarHidden

//是否隐藏阴影
shadowHidden

//导航栏上按钮的颜色设置
tintColor

//导航栏上字体的颜色
titleTextColor

//导航栏是否半透明
translucent

initialRoute的属性 

扫描二维码关注公众号，回复： 8164687 查看本文章 
//加载的视图组件
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

//包裹样式
warpperStyle: [Object Object]

四、Navigator组件

1、注意事项：如果RN版本升级到0.43以上的话，Navigator已过期，不能直接从react-native里面获取了，而是作为一个单独的库模块，解决方案如下：

//安装
npm install react-native-deprecated-custom-components --save //已过期失效，推荐使用第二个命令进行安装
yarn add react-native-deprecated-custom-components           //可使用

//导入
import {Navigator} from 'react-native-deprecated-custom-components'

2、Navigator组件提供的属性如下：

/**
* 配置跳转动画  
* (route, routeStack) => Navigator.SceneConfigs.FloatFromRight
*/
configureScene: PropTypes.func,

/**
* 渲染场景
* (route, navigator) =>
*   <MySceneComponent title={route.title} navigator={navigator} />
*/
renderScene: PropTypes.func.isRequired,

/**
* 配置路由
*/
initialRoute: PropTypes.object,
initialRouteStack: PropTypes.arrayOf(PropTypes.object),

/**
* 路由即将跳转时调用
*/
onWillFocus: PropTypes.func,

/**
* 路由完成跳转时调用
*/
onDidFocus: PropTypes.func,

/**
* 导航栏
*/
navigationBar: PropTypes.node,

/**
* navigator对象
*/
navigator: PropTypes.object,

/**
* 场景样式
*/
sceneStyle: ViewPropTypes.style,

3、虽然Navigator组件很粗糙，但是它的定制性极强，可以很好解决NavigatorIOS组件不能跨平台和自定义的问题。Navigator组件只提供跳转功能，界面需要开发者自己去定制。使用步骤大致如下：

//1、配置路由
initialRoute={{component:this.props.component, passProps:{}}}

//2、配置跳转
configureScene={()=>{return Navigator.SceneConfigs.FloatFromBottom;}}

//3、渲染场景
renderScene={(route, navigator) => {
    // ...扩展符, 作用:如果是对象,就获取对象中所有值,如果是数组,就获取数组中所有值
   const Component = route.component; 
    return (
        <View style={{flex:1}}> //使用flex设置导航尺寸
            <Component navigator={navigator} route={route} {... route.passProps}>      
        </View>      
    )
}

4、Navigator组件支持的跳转方向和类型有很多，如下所示：

Navigator.SceneConfigs.PushFromRight //(默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

5、导航过渡过程中，可以配置的回调函数如下：

//每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由
onDidFocus function 

//会在导航切换之前调用，参数为目标路由
onWillFocus function

五、使用NavigatorIOS组件

需求：新闻列表页跳转到新闻详情页。

index.ios.js程序入口文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import NavigatorBar from './src/NavigatorBar'

import {
  AppRegistry,
  View
} from 'react-native';


export default class ReactNativeDemo extends Component {

  render() {
    return (
        <NavigatorBar/>
    );
  }
}

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

Navigator.js创建的NavigatorIOS导航栏组件文件

import React, { Component } from 'react';
import NewsHome from './NewsHome'

import {
    NavigatorIOS
} from 'react-native';

export default class NavigatorBar extends Component{

    render(){
        return (
            <NavigatorIOS
                style={{flex: 1}}          //设置导航栏样式
                barTintColor={'purple'}    //设置导航栏颜色
                titleTextColor={'white'}   //设置导航标题颜色
                itemWrapperStyle={{backgroundColor:'orange'}} //设置导航页面背景颜色
                initialRoute={{
                    component: NewsHome,   //设置路由，列表主页
                    title: "新闻列表",      //设置导航标题
                    passProps: {}          //传递数据
                }}
            />
        );
    }
}

NewsHome.js新闻列表页文件

import React, { Component } from 'react';
import List from './List'

import {
    View,
    StyleSheet
} from 'react-native';

/*
* 此处使用扩展运算符...this.props，将属性navigator传递到List组件中，因为List组件中无法直接获取navigator组件对象
* */
export default class NewsHome extends Component{
    render() {
        return (
            <View style={styles.container}>
                <List title="1、多地校长、专家在京探讨全息教育" {...this.props}/>
                <List title="2、中国网络安全产业高峰论坛在京召开" {...this.props}/>
                <List title="3、启动四天多 北京冬奥赛会志愿者报名人数超46万" {...this.props}/>
                <List title="4、丰台消防救援支队筑牢辖区冬季火灾防线" {...this.props}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        marginTop: 64,
        backgroundColor:'white'
    }
});

List.js新闻列表组件文件

import React, { Component } from 'react';
import NewDetail from "./NewsDetail";

import {
    StyleSheet,
    View,
    Text
} from 'react-native';

export default class List extends Component{

    constructor(props){
        super(props);
        this.push = this.push.bind(this); //绑定push事件，绑定方式有多种，这是其中方法之一
    }

    //跳转到详情页
    push(){
        let {navigator} = this.props; //作用域本地化
        navigator.push({              //navigator对象调用push函数
            component: NewDetail,     //新闻详情页
            title:"详情页",            //设置新闻详情页导航标题
            leftButtonTitle:"返回",    //设置新闻详情页导航左边按钮
            rightButtonTitle:"消息",   //设置新闻详情页导航右边按钮
            onLeftButtonPress:(() => navigator.pop()),          //返回上一页：列表主页，navigator对象调用pop函数
            onRightButtonPress:(() => alert("welcome to you")), //弹出吐司
            wrapperStyle: {backgroundColor:'yellow'}            //设置页面背景色
        })
    }

    render() {
        return (
            <View style={styles.list_item}>
                <Text style={styles.list_font} onPress={this.push}>{this.props.title}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    list_item: {
        height: 60,
        borderBottomWidth: 1,
        borderBottomColor: '#DDD',
        justifyContent: 'center'
    },
    list_font: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'black'
    }
}); 

NewsDetail.js新闻详情页文件

import React, { Component } from 'react';

import {
    StyleSheet,
    View
} from 'react-native';

export default class NewsDetail extends Component{
    render() {
        return (
            <View style={styles.container}/>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        marginTop: 64,
        backgroundColor:'white'
    }
});

模拟器运行结果如下：

  

六、使用Navigator组件

1、无导航栏，只使用路由功能：

inde.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import NavigatorCustomBar from './src/NavigatorCustomBar'

import {
  AppRegistry
} from 'react-native';

export default class ReactNativeDemo extends Component {

  render() {
    return (
        <NavigatorCustomBar/>
    );
  }
}

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

NavigatorCustomBar.js

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

import {
    View,
    Text,
    StyleSheet
} from 'react-native';


/*
* 封装Navigator
* 所有的切换动画都是从底部往上，回退时从上往底部
* 这里通过{...passProps}模仿NavigatorIOS的passProps进行传值
* initialRoute中的component: 传递的入口组件
*
* */
export default class NavigatorCustomBar extends Component{

    render(){
        return (
            <Navigator
                style={{flex:1}} //设置样式
                initialRoute={{component:HomePage, passProps:{}}} //配置路由
                configureScene={()=> {return Navigator.SceneConfigs.FloatFromBottom;}} //设置跳转动画
                renderScene={(route, navigator) => {    //渲染页面场景
                    const Component = route.component;
                    return (
                        <Component navigator={navigator} route={route} {...route.passProps}/>
                    )
                }}
            />
        )
    }
}


//首页
class HomePage extends Component{

    render(){
        return (
            <View style={styles.home}>
                <Text style={styles.font} onPress={()=>this.props.navigator.push({component: DetailPage})}>
                    HomePage
                </Text>
            </View>
        );
    }
}

//详情页
class DetailPage extends Component{

    render(){
        return (
            <View style={styles.detail}>
                <Text style={styles.font} onPress={()=>this.props.navigator.pop()}>
                    DetailPage
                </Text>
            </View>
        );
    }
}

//样式
const styles = StyleSheet.create({
    home:{
        flex: 1,
        backgroundColor:'red',
        justifyContent: 'center',
        alignItems:'center',
    },
    detail:{
        flex: 1,
        backgroundColor:'green',
        justifyContent: 'center',
        alignItems:'center',
    },
    font:{
        fontSize:28,
        color:'white'
    }
});

2、有导航栏，且使用路由功能：

inde.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import NavigatorCustomBar from './src/NavigatorCustomBar'

import {
  AppRegistry
} from 'react-native';

export default class ReactNativeDemo extends Component {

  render() {
    return (
        <NavigatorCustomBar/>
    );
  }
}

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

NavigatorCustomBar.js

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

import {
    View,
    Text,
    StyleSheet
} from 'react-native';


/*
* 封装Navigator
* 所有的切换动画采用默认方式
* 这里通过{...passProps}模仿NavigatorIOS的passProps进行传值
* initialRoute中的component: 传递的入口组件
* */
export default class NavigatorCustomBar extends Component{

    //1、路由初始化
    initialRoute = {
        name:"HomePage",    //路由名称
        component:HomePage, //路由页面
        index:0,            //页面索引
        passProps:{leftTitle:"返回",midTitle:"首页",rightTitle:""} //透传数据
    };

    //2、动画初始化
    configureScene = () => {
        return Navigator.SceneConfigs.PushFromRight;
    }

    //3、场景初始化
    renderScene = (route, navigator) => {
        const Component = route.component;
        return <Component navigator={navigator} route={route} {...route.passProps}/>
    }

    //4、Mapper初始化
    navBarRouteMapper = {
        //左边按钮
        LeftButton(route, navigator, index){
            if (index <= 0) return;
            return (
                    <Text style={styles.left} onPress={ () => navigator.pop()}>
                        {route.passProps.leftTitle}
                    </Text>
            );
        },
        //中间标题
        Title(route, navigator){
            return (
                    <Text style={styles.mid}>
                        {route.passProps.midTitle}
                    </Text>
            );
        },
        //右边按钮
        RightButton(route, navigator){
            if(!route.passProps.rightTitle) return;
            return (
                    <Text style={styles.right} onPress={() => alert('welcome to me!')}>
                        {route.passProps.rightTitle}
                    </Text>
            );
        }
    };

    render(){
        return (
            <Navigator
                style={{flex:1}}                     //设置样式
                initialRoute={this.initialRoute}     //配置路由
                configureScene={this.configureScene} //设置跳转动画
                renderScene={this.renderScene}       //渲染页面场景
                navigationBar={                      //设置导航栏Mapper
                    <Navigator.NavigationBar
                        style={styles.navContainer}
                        routeMapper={this.navBarRouteMapper}/>
                }
            />
        )
    }
}


//首页
class HomePage extends Component{

    //设置详情页导航栏
    pushToDetailPage(){
        this.props.navigator.push({
            index:1,
            component: DetailPage,
            passProps:{
                leftTitle: this.props.leftTitle,
                midTitle:"详情",
                rightTitle:"消息"
            }
        })
    }

    render(){
        return (
            <View style={styles.home}>
                <Text style={styles.font} onPress={this.pushToDetailPage.bind(this)}>
                    this is HomePage
                </Text>
            </View>
        );
    }
}

//详情页
class DetailPage extends Component{

    render(){
        return (
            <View style={styles.detail}>
                <Text style={styles.font} onPress={()=>this.props.navigator.pop()}>
                    this is DetailPage
                </Text>
            </View>
        );
    }
}

//样式
const styles = StyleSheet.create({
    navContainer:{
        height:64,
        backgroundColor:'#41ABF7'
    },
    left:{
        paddingLeft:20,
        paddingTop:10,
        flex:1/3,
        fontSize:20,
        color:'white'
    },
    mid:{
        paddingTop:10,
        flex:1/3,
        fontSize:20,
        color:'white'
    },
    right:{
        paddingRight:20,
        paddingTop:10,
        flex:1/3,
        fontSize:20,
        color:'white'
    },
    home:{
        flex: 1,
        marginTop:64,
        backgroundColor:'orange',
        justifyContent: 'center',
        alignItems:'center',
    },
    detail:{
        flex: 1,
        marginTop:64,
        backgroundColor:'brown',
        justifyContent: 'center',
        alignItems:'center',
    },
    font:{
        fontSize:28,
        color:'white'
    }
});

猜你喜欢

转载自www.cnblogs.com/XYQ-208910/p/12017932.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022