ReactNative的Navigator组件使用方式
2017-02-14 15:54
866 查看
React Native的编程思想类似于
导航栏也使用
导航栏作为最重要的应用组件之一, 除了处理页面导航功能以外, 还会提供页面栈的管理, 管理页面的跳入和跳出. 本文介绍 Navigator
组件的使用方式.
React Native
本文源码的GitHub下载地址
关于React Native项目的启动, 参考1, 参考2.
添加 Navigator 的组件
设置方法: 初始化路由(initialRoute), 配置场景动画(configureScene), 渲染场景(renderScene). 初始化路由(initialRoute), 使用
配置场景动画(configureScene): 根据路由的
判断使用的动画样式, 底部弹出或右侧弹出.
渲染场景(renderScene): 使用动态加载组件的方式. 设置加载页面的
其余使用
也可以使用
FirstPage组件: 包含导航栏标题和两个跳转按钮. 提供两种跳转动画, 右出和底部. 点击按钮调用
跳转到第二页.
也可以使用
不能自动生成注释.
第一页
导航跳转, 调用
下划线表示私有方法, 类似Java的private限定符.
SecondPage组件: 第二页, 跳出返回第一页. 调用
使用当前页面出栈, 显示上一个栈内页面.
第二页
Navigator的主要功能, 是管理页面栈, 控制页面的跳入跳出.
对于应用而言, 需要统一的导航栏, Navigator 组件也提供导航栏的定制.
与上文类似, 额外添加
属性添加
NavigationBarRouteMapper: 导航栏路由映射器, 设置左键LeftButton, 右键RightButton, 标题Title.
左键LeftButton:
通过判断
点击调用
右键RightButton: 点击调用路由(route)的
提示信息. 根据路由的
导航栏
第一页与第二页与上文类似, 当第一页跳转时, 传递的路由信息有些变化, 控制第二页与导航栏的显示信息.
React Native 路由的基本功能就是这些, 控制页面的切换, 控制导航栏的功能. 导航栏作为应用最重要的组件之一, 一定要熟练掌握.
OK, that's all ! Enjoy it!
原文转载自:http://www.jianshu.com/p/91fa0f34895e
iOS,
导航栏也使用
Navigator作为标识, 类似于
Android的
ActionBar.
导航栏作为最重要的应用组件之一, 除了处理页面导航功能以外, 还会提供页面栈的管理, 管理页面的跳入和跳出. 本文介绍 Navigator
组件的使用方式.
React Native
本文源码的GitHub下载地址
关于React Native项目的启动, 参考1, 参考2.
简单使用
Navigator
添加 Navigator 的组件<Navigator/>.
设置方法: 初始化路由(initialRoute), 配置场景动画(configureScene), 渲染场景(renderScene). 初始化路由(initialRoute), 使用
FirstPage页面作为首页.
// 主模块 class SimpleView extends Component { // ... render() { return ( <Navigator style={{flex:1}} initialRoute={{component: FirstPage}} configureScene={this.configureScene} renderScene={this.renderScene}/> ); } }
配置场景动画(configureScene): 根据路由的
type属性,
判断使用的动画样式, 底部弹出或右侧弹出.
/** * 配置场景动画 * @param route 路由 * @param routeStack 路由栈 * @returns {*} 动画 */ configureScene(route, routeStack) { if (route.type == 'Bottom') { return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出 } return Navigator.SceneConfigs.PushFromRight; // 右侧弹出 }
渲染场景(renderScene): 使用动态加载组件的方式. 设置加载页面的
navigator参数,
其余使用
route.passProps属性传递其他参数.
/** * 使用动态页面加载 * @param route 路由 * @param navigator 导航器 * @returns {XML} 页面 */ renderScene(route, navigator) { return <route.component navigator={navigator} {...route.passProps} />; }
也可以使用
静态加载组件, 需要预定义组件, 没有动态加载灵活.
/** * 渲染场景, 通过不同参数, 设置不同页面 * @param route 路由, 场景信息 * @param navigator 导航器 * @returns {XML} 页面 */ renderScene(route, navigator) { if (route.name == 'FirstPage') { return <FirstPage navigator={navigator} {...route.passProps}/> } else if (route.name == 'SecondPage') { return <SecondPage navigator={navigator} {...route.passProps}/> } }
第一页
FirstPage组件: 包含导航栏标题和两个跳转按钮. 提供两种跳转动画, 右出和底部. 点击按钮调用_navigate()方法,
跳转到第二页.
// 第一页. 使用Component可以自动生成注释, 符合标准 class FirstPage extends Component { // ... render() { return ( <View style={styles.container}> <View style={styles.heading}> <Text style={styles.headText}> {'第一页'} </Text> </View> <TouchableOpacity style={styles.button} onPress={()=>this._navigate('你好! (来源第一页:右出)')}> <Text style={styles.buttonText}> {'跳转至第二页(右出)'} </Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={()=>this._navigate('你好! (来源第一页:底出)', 'Bottom')}> <Text style={styles.buttonText}> {'跳转至第二页(底部)'} </Text> </TouchableOpacity> </View> ); } }
也可以使用
var FirstPage = React.createClass()创建组件, 但没有使用
继承Component方式规范,
不能自动生成注释.
第一页
_navigate()方法:
导航跳转, 调用
navigator.push()方法. 传递参数
passProps的
name属性,
type动画类型,
component跳转组件.
/** * 给Navigator传递参数. * @param name 参数 * @private */ _navigate(name, type = 'Normal') { this.props.navigator.push({ component: SecondPage, passProps: { name: name }, type: type }) }
下划线表示私有方法, 类似Java的private限定符.
第二页
SecondPage组件: 第二页, 跳出返回第一页. 调用navigator.pop()方法,
使用当前页面出栈, 显示上一个栈内页面.
// 第二页, 点击跳出返回第一页 class SecondPage extends Component { render() { return ( <View style={styles.container}> <View style={styles.heading}> <Text style={styles.headText}> 第二页: {this.props.name} </Text> </View> <TouchableOpacity style={styles.button} onPress={()=>this.props.navigator.pop()}> <Text style={styles.buttonText}> 返回上一页 </Text> </TouchableOpacity> </View> ); } }
第二页
Navigator的主要功能, 是管理页面栈, 控制页面的跳入跳出.
统一导航栏
对于应用而言, 需要统一的导航栏, Navigator 组件也提供导航栏的定制.
Navigator
与上文类似, 额外添加navigationBar的属性, 自定义设置导航栏, 保持所有页面的导航栏一致.
属性添加
<NavigationBar/>标签, 通过
routeMapper控制导航栏的功能和样式.
// 主模块 class UniformView extends Component { //... render() { return ( <Navigator style={{flex:1}} initialRoute={{name: 'FirstPage', component: FirstPage}} configureScene={this.configureScene} renderScene={this.renderScene} navigationBar={ <Navigator.NavigationBar style={styles.navContainer} routeMapper={NavigationBarRouteMapper}/>} /> ); } }
NavigationBarRouteMapper
NavigationBarRouteMapper: 导航栏路由映射器, 设置左键LeftButton, 右键RightButton, 标题Title.// 导航栏的Mapper var NavigationBarRouteMapper = { // 左键 LeftButton(route, navigator, index, navState) { // ... }, // 右键 RightButton(route, navigator, index, navState) { // ... }, // 标题 Title(route, navigator, index, navState) { return ( <View style={styles.navContainer}> <Text style={styles.title}> 应用标题 </Text> </View> ); } };
左键LeftButton:
index属性表示当前页面的索引,
通过判断
index属性, 获知栈内是否有其他页面, 判断
后退按钮是否显示.
点击调用
navigator.pop()出栈.
// 左键 LeftButton(route, navigator, index, navState) { if (index > 0) { return ( <View style={styles.navContainer}> <TouchableOpacity underlayColor='transparent' onPress={() => {if (index > 0) {navigator.pop()}}}> <Text style={styles.leftNavButtonText}> 后退 </Text> </TouchableOpacity> </View> ); } else { return null; } },
右键RightButton: 点击调用路由(route)的
onPress()方法,
提示信息. 根据路由的
rightText属性添加显示文字.
// 右键 RightButton(route, navigator, index, navState) { if (route.onPress) return ( <View style={styles.navContainer}> <TouchableOpacity onPress={() => route.onPress()}> <Text style={styles.rightNavButtonText}> {route.rightText || '右键'} </Text> </TouchableOpacity> </View> ); },
导航栏
第一页/第二页
第一页与第二页与上文类似, 当第一页跳转时, 传递的路由信息有些变化, 控制第二页与导航栏的显示信息.// 填出提示框 onPress() { alert("我是Spike!"); } /** * 跳转页面至SecondPage * @param name 传递参数 * @param type 动画类型 */ gotoNext(name, type = 'Normal') { this.props.navigator.push({ component: SecondPage, passProps: { id: name }, onPress: this.onPress, rightText: 'ALERT!', type: type }) }
React Native 路由的基本功能就是这些, 控制页面的切换, 控制导航栏的功能. 导航栏作为应用最重要的组件之一, 一定要熟练掌握.
OK, that's all ! Enjoy it!
原文转载自:http://www.jianshu.com/p/91fa0f34895e
相关文章推荐
- ReactNative的Navigator组件使用方式
- 使用 react-native-tab-navigator 创建 TabBar 组件
- react-native-tab-navigator组件的基本使用示例代码
- react-native组件中NavigatorIOS和ListView结合使用的方法
- 底部导航组件组件react-native-tab-navigator的使用
- ReactNative-Navigator组件简单使用
- ReactNative开发之DrawerLayoutAndroid组件的使用
- (六)React Native---NavigatorIOS 组件
- React-Native 基础(四)使用style定义组件的样式
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- RN(react native)入坑指南-07,使用navigator实现页面跳转
- 【原创】东方耀reactnative 视频31之-开源导航组件 react-native-tab-navigator
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- React-Native- RefreshControl && Navigator 使用案例
- React Native教程之Navigator的使用
- React Native 的 Navigator 组件使用方式
- React Native系列——WebView组件使用介绍
- react-native图片组件的使用
- [深入剖析React Native]React Native组件之Navigator