React使今年来比较热门的前端库,之所以说是库呢,因为React.js是应用于MVC中的V层,
它并不是一个完整的MVC框架,所以,我也不知称之为框架了。
不过这并不影响React的火热。
混合应用的发展也有不少时间了,我自己也参与了多次混合应用开发。
从最初的移动前端webapp开发到内嵌应用中的传统混合应用开发
再到成熟的前端混合应用开发框架的实践——ionic
到如今面前的React Native.
都是在前端混合应用开发上越走越远。
React Native 学习资料不多,国内比较全的像极客学院,ruanyf文章等,还有像晴明等人汉化的官网
我自己也尝试了一些简单React Native 项目开发。
这里简单记录以下React Native的一个常用组件:导航器
导航器使控制着app页面的跳转,可以说每个应用的必须的组件。
官方介绍:
使用导航器可以让你在应用的不同场景(页面)间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene
方法,导航栏可以根据指定的路由来渲染场景。
可以通过configureScene
属性获取指定路由对象的配置信息,从而改变场景的动画或者手势。查看Navigator.SceneConfigs
来获取默认的动画和更多的场景配置选项。
功能明确,这里说一下使用:
官方的基本用法在我看来还是比较抽象的(好吧,我比较菜 - -!)
先来看一个明了点的栗子:
1 class demo extends Component { 2 // 配置页面切换效果方法 3 configureScene(route) { 4 return Navigator.SceneConfigs.FloatFromBottom; 5 } 6 // 配置页面跳转路由 7 renderScene(route, navigator) { 8 var Component = null; 9 switch (route.name) { 10 case 'first': 11 Component = FirstPageComponent; 12 break; 13 case 'second': 14 Component = SecondPageComponent; 15 break; 16 default : 17 Component = DefaultPageComponent; 18 } 19 return <Component navigator={navigator}/> 20 } 21 // 渲染导航器 22 render() { 23 return ( 24 <Navigator 25 initialRoute={{name:'first'}} // 设置默认路由 26 configureScene={this.configureScene} // 设置导航器跳转方式 27 renderScene={this.renderScene} // 设置导航器路由 28 style={styles.navigator} // 设置导航器样式 29 /> 30 ); 31 } 32 }
上面这个栗子还是比较清晰的,
这里介绍 Navigator 的几个基本属性:
initialRoute object
定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。
initialRoute
必须是initialRouteStack
中的一个路由。initialRoute
默认为initialRouteStack
中最后一项。
configureScene function
可选的函数,用来配置场景动画和手势。
会带有两个参数调用,一个是当前的路由,一个是当前的路由栈。
然后它应当返回一个场景配置对象
renderScene function
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。