[深入剖析React Native]React Native组件之Navigator
来源:互联网 发布:budgie linux 编辑:程序博客网 时间:2024/05/21 10:36
1.简介
导航组件Navigator可以让app在不同页面进行切换。为达到这样的功能,Navigator提供了路由对象功能进行区分每个页面。
我们可以通过renderScene方法,Navaigator根据指定的路由进行渲染指定的界面。
除了以上功能之外,为了改变页面切换的动画或者页面的手势,该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。
对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs
2.动画手势属性
PushFromRight
FloatFromRight
FloatFromLeft
FloatFromBottom
FloatFromBottomAndroid
FadeAndroid
HorizontalSwipeJump
HorizontalSwipeJumpFromRight
VertivalUpSwipeJump
VertivalDownSwipeJump
更多属性,可以去修改NavigatorSceneConfigs.js这个文件。
3.Navigator方法
在使用导航器的时候,如果你已经获取了导航器对象的引用,我们可以进行调用以下一些方法来实现页面导航功能:getCurrentRoutes() 该进行返回存在的路由列表信息
getCurrentRoutes() 返回存在的路由列表信息
jumpBack() 回退操作,但是不会卸载(删除)当前页面
jumpForward() 跳转到相对于当前页面的下一个页面
jumpTo(route) 根据传入的路由信息,跳转到一个指定的页面(该页面不会卸载删除)
push(route) 导航切换到一个新的页面,新的页面进行压入栈。通过jumpForward()方法可以回退过去
pop 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前的页面
replace(route) 只用传入的路由的指定页面进行替换掉当前的页面
replaceAtIndex(route, index) 传入路由以及位置索引,使用该路由指定的页面跳转到指定位置的页面
replacePrevious(route) 传入路由,通过指定路由的页面替换掉前一个页面
resetTo(route) 进行导航到新的界面,并且重置整个路由栈
immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
popToRoute(route) 进行弹出相关页面,跳转到指定路由的页面,弹出来的页面会被卸载删除
popToTop() 进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除
4.Navigator属性风格
configureScene -- function 方法, 该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用,进行返回一个页面参数配置对象:(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
initialRoute -- object 参数对象, 进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项
initialRouteStack -- [object] 参数对象数组 该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话,那么就必须设置initialRouteStack属性,使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话,该会生成只包含initalRoute值的数组
navigationBar -- node 该为可选的参数,在页面切换中用来提供一个导航栏
navigator -- object 该为可选参数,可以从父类导航器中获取导航器对象
onDidFoucs -- function 该方法已经废弃,我们可以使用navigationContext.addListener(‘didfocus’,callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由
onWillFocus --function 该方法已经废弃,我们可以使用navigationContext.addListener(‘willfocus’,callback)方法进行替代。该会页面每次进行切换之前调用
renderScene -- function 该为必须调用的方法,该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数,具体是方法如下:
(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />
sceneStyle -- 样式风格,该继承了View视图的所有样式风格。该设置用于每个页面容器的风格
5.实例
'use strict';import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Navigator, TouchableHighlight,} from 'react-native';class NavButton extends Component { render() { return ( <TouchableHighlight style={styles.button} underlayColor="#B5B5B5" onPress={this.props.onPress}> <Text style={styles.buttonText}>{this.props.text}</Text> </TouchableHighlight> ); }}class HomeScene extends Component { render() { return( <View style={styles.container}> <NavButton onPress={() => { this.props.navigator.push({ component: ConfigsScene, name: '手势属性', }); }} text='手势属性' /> <NavButton onPress={() => { this.props.navigator.push({ component: MethodsScene, name: '方法', }); }} text='方法' /> </View> ); }}class ConfigsScene extends Component { render() { return ( <View style={styles.container}> <Text style={styles.messageText}>{this.props.message}</Text> <NavButton onPress={() => { this.props.navigator.pop(); }} text="返回上一页" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.PushFromRight, }); }} text="PushFromRight default" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FloatFromRight, }); }} text="FloatFromRight" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FloatFromLeft, }); }} text="FloatFromLeft" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FloatFromBottom, }); }} text="FloatFromBottom" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FloatFromBottomAndroid, }); }} text="FloatFromBottomAndroid" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FadeAndroid, }); }} text="FadeAndroid" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump, }); }} text="HorizontalSwipeJump" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJumpFromRight, }); }} text="HorizontalSwipeJumpFromRight" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.VerticalUpSwipeJump, }); }} text="VerticalUpSwipeJump" /> <NavButton onPress={() => { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.VerticalDownSwipeJump, }); }} text="VerticalDownSwipeJump" /> </View> ); }}class MethodsScene extends Component { render() { return ( <View style={styles.container}> <Text style={styles.messageText}>Current Routes length: {this.props.navigator.getCurrentRoutes().length}</Text> <NavButton onPress={() => { this.props.navigator.jumpBack(); }} text='jumpBack' /> <NavButton onPress={() => { }} text='jumpForward' /> <NavButton onPress={() => { }} text='jumpTo' /> </View> ); }}class EndScene extends Component { render() { return ( <View style={styles.container}> <NavButton onPress={() => { this.props.navigator.pop(); }} text="返回上一页" /> <NavButton onPress={() => { this.props.navigator.popToTop(); }} text="退到栈中第一个页面" /> </View> ); }}export default class NavigatorMazouri extends Component { render() { return ( <Navigator style={styles.container} initialRoute={{ component: HomeScene, name: 'home' }} renderScene={(route, navigator) => { let Component = route.component; if(route.component) { return <Component {...route.params} navigator={navigator} /> } }} configureScene={(route) => { if (route.sceneConfig) { return route.sceneConfig; } return Navigator.SceneConfigs.PushFromRight; }} /> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#F5FCFF', }, messageText: { fontSize: 17, fontWeight: '500', padding: 15, marginTop: 50, marginLeft: 15, }, button: { backgroundColor: 'white', padding: 15, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#CDCDCD', },});
- [深入剖析React Native]React Native组件之Navigator
- React Native]React Native组件之Navigator
- [深入剖析React Native]React Native组件之Touchable*
- React Native之Navigator
- React-Native之Navigator
- React-Native组件之 Navigator和NavigatorIOS
- [深入剖析React Native]React Native组件之Touchable*源码解析(1)
- 学习react-native之Navigator
- React—native 之 Navigator (导航路由)组件
- React Native 的 Navigator 组件使用方式
- React Native导航Navigator组件基本使用方法
- React Native导航Navigator组件基本使用方法
- React Native 的 Navigator 组件使用方式
- React Native 的 Navigator 组件(导航功能)
- react-native navigator
- react-native--Navigator
- React Native[Navigator]
- react-native navigator
- 营销QQ年收入几十万自动来粉丝终极玩法
- MyBatis学习总结(六)——调用存储过程
- 第七章 函数编程
- Spring 依赖注入方式详解
- 关于@package
- [深入剖析React Native]React Native组件之Navigator
- Linux学习笔记(三)--redis学习
- 含图片的word模板导出
- MyBatis学习总结(七)——Mybatis缓存
- Mybatis3+Spring4+SpringMVC4 整合
- ClickOnce部署后,客户端发现有新版时的自动更新有关问题?不要用户确认的那种.
- 自定义异常类
- 匈牙利原理
- mac Mysql密码修改