如何优雅的实现界面跳转 之 统跳协议 - IOS - 伯乐在线
& 如何优雅的实现界面跳转 之 统跳协议
预热 – 我要解决的问题
首先我还是要推荐Gaosboy的这篇文章
文章中，介绍了天猫app，基于文件配置和uri的页面跳转。这大大增加了app端的灵活性， 而这种实现很类似今天的前端或后端开发中的 静态路由 和 动态路由协议。
除了天猫，在很多的客户端架构的文章中，路由解耦的案例并不不少见，如
原生路由协议， 其实两年前就有了类似的实现。比如900+Star的，而作者是当时还在布丁动画工作的Light。2015年我有幸见到本人，人很nice，并真是全栈。
DarwinNativeRouter 在接口设计上，很大程度上的参考了现有的react路由协议 react router。并且对原生跳转方式保留很大的可扩展性。所以我的初衷 DarwinNativeRouter 是一个足够轻量级的框架。Light & Flexible。
全局路由协议能解决的问题
错中复杂的Controller的跳转依赖
在iOS的世界里，传统的Controller跳转方式， A 跳转 B， 则 A 必须持有 B 的对象。 而在app长大的过程中， 势必会造成 A －& B , B -& C, A -& C D, E, F…
从而产生复杂的依赖链。全局的Router 使 A 不必依赖于 特定的 Controller 便可以实现跳转。
如下面跳转：
We Always Do:
Objective-C
UIViewController *personal = [UIViewController new];
personal.userId = @"";
[self.navigationController pushViewController:personal animated:YES];
UIViewController *personal = [UIViewController new];&&personal.userId = @"";&&[self.navigationController pushViewController:personal animated:YES];
Router Code:
Objective-C
[[DNRouter router]open:@"./user//profile"];
[[DNRouter router]open:@"./user//profile"];
又比如我们要在navigationController根路径跳转
We Always Do:
Objective-C
[self.navigationController popToRootViewControllerAnimated:NO];
UIViewController *personal = [UIViewController new];
personal.userId = @"";
[self.navigationController pushViewController:personal animated:YES];
[self.navigationController popToRootViewControllerAnimated:NO];&&UIViewController *personal = [UIViewController new];&&personal.userId = @"";&&[self.navigationController pushViewController:personal animated:YES];
Router Code:
Objective-C
[[DNRouter router]open:@"/user//profile"];
[[DNRouter router]open:@"/user//profile"];
推送通知，点击打开指定页面
对于这种需求， 相信，目前最多的实现应该是两种， 一种的传参的Url， 而另一种，是传递int类型，并通过类似switch case对参数值的硬编码，实现跳转逻辑。
我是很反感第二种的跳转方式， 1. int毫无疑义， 只能硬解释。 2. 跳转的页面有限。 当然如果url采用硬编码， 也是跳转有限的。
而有了router，一切不一样。
从didFinishLaunchingWithOptions 和 didReceiveRemoteNotification捕获payload
跳用Router
Somethings we may do:
Objective-C
switch (type) {
case 1001:
//jumping code
case 1002:
//jumping code
case 1003:
//jumping code
case 1004:
//jumping code
123456789101112131415161718
switch (type) {&&case 1001:&&&&//jumping code&&&&break;&&&case 1002:&&&&//jumping code&&&&break;&&case 1003:&&&&//jumping code&&&&break;&&case 1004:&&&&//jumping code&&&&break;&&&default:&&&&break;&&}
Now we need do:
Objective-C
if([[DNRouter router]canOpen:url.absoluteString])
[[DNRouter router]open:url.absoluteString];
if([[DNRouter router]canOpen:url.absoluteString])&&[[DNRouter router]open:url.absoluteString];
app间通讯 及 deeplink
Router 可以轻松handle deeplink。 deeplink 即： 从safari打开app的指定页面。 这方面做得比较好的， 如新浪微博的app， 在点击对应的新浪微博热点 条目时， 就发生了跳转，并跳到了条目详情。
Router， 同样可以被用作 app 间通讯， 和 deeplink 的原理相同。uri的通讯方式，被认为是最简单的app间通讯。 如我们常常使用的微信分享，配置的 scheme 就是用来做跳转和通讯的。
Router Code
Objective-C
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary&NSString*, id& *)options
if([[DNRouter router]canOpen:url.absoluteString])
[[DNRouter router]open:url.absoluteString];
return YES;
return NO;
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary&NSString*, id& *)options{&&if([[DNRouter router]canOpen:url.absoluteString])&&{&&&&[[DNRouter router]open:url.absoluteString];&&&&return YES;&&}&&return NO;}
一致的行为处理， Hybrid & React Native
有了Router， 你可以使这些跳转 有一致的行为。
DarwinNativeRouter 特性
静态路由 ／user
Objective-C
[DNRouter routerWithName:@"profile" path:@"/user"
navigationController:(UINavigationController *)self.window.rootViewController
controller:^__kindof UIViewController *{
UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];
} action:^(__kindof UIViewController *controller) {
[DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);
123456789101112
[DNRouter routerWithName:@"profile" path:@"/user"&&&&navigationController:(UINavigationController *)self.window.rootViewController&&&&&&&&&&&&&&controller:^__kindof UIViewController *{&&&UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];&&return controller;&} action:^(__kindof UIViewController *controller) {&&&[DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);&}];
动态路由 /user/:id
Objective-C
[DNRouter routerWithName:@"profile" path:@"/user/:id"
navigationController:(UINavigationController *)self.window.rootViewController
controller:^__kindof UIViewController *{
UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];
} action:^(__kindof UIViewController *controller) {
[DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);
123456789101112
[DNRouter routerWithName:@"profile" path:@"/user/:id"&&&&navigationController:(UINavigationController *)self.window.rootViewController&&&&&&&&&&&&&&controller:^__kindof UIViewController *{&&&UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];&&return controller;&} action:^(__kindof UIViewController *controller) {&&&[DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);&}];
更方便的跳转，名称跳转 name jumping
Objective-C
[[DNRouter router]redirect:@"profile"];
[[DNRouter router]redirect:@"profile"];
相对路径跳转
Objective-C
[[DNRouter router]open:@"/user"];
//当前路径
[[DNRouter router]open:@"./user"];
[[DNRouter router]open:@"../user"];
//跟路径[[DNRouter router]open:@"/user"];&//当前路径[[DNRouter router]open:@"./user"];&//上一级[[DNRouter router]open:@"../user"];
易扩展， 自定义跳转 action
Objective-C
[DNRouter routerWithName:@"profile" path:@"/user/:id"
navigationController:(UINavigationController *)self.window.rootViewController
controller:^__kindof UIViewController *{
UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];
} action:^(__kindof UIViewController *controller) {
[DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);
123456789101112
[DNRouter routerWithName:@"profile" path:@"/user/:id"&&&&navigationController:(UINavigationController *)self.window.rootViewController&&&&&&&&&&&&&&controller:^__kindof UIViewController *{&&&UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];&&return controller;&} action:^(__kindof UIViewController *controller) {&&&[DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);&}];
默认行为，及 异常处理，index & 404
Objective-C
// index page
[DNRouter defaultRouterWithController:^__kindof UIViewController *{
} action:^(__kindof UIViewController *controller) {
// 404 page
[DNRouter notFoundRouterWithController:^__kindof UIViewController *{
} action:^(__kindof UIViewController *controller) {
12345678910111213
// index page[DNRouter defaultRouterWithController:^__kindof UIViewController *{&} action:^(__kindof UIViewController *controller) {&}];&// 404 page[DNRouter notFoundRouterWithController:^__kindof UIViewController *{&} action:^(__kindof UIViewController *controller) {&}];
DarwinNativeRouter 现在还没有到1.0版本，还有很多可以想象的东西，欢迎让他更加完善，和提pr。
可能感兴趣的话题
关于iOS频道
iOS频道分享iOS和Swift开发，应用设计和推广，iOS相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线React-Native 的Navigator控制界面跳转 - 推酷
React-Native 的Navigator控制界面跳转
回顾一下,一个简单的界面包含一下几块
/** * Sample React Native App * /hanks-zyh */'use strict';var React = require('react-native');var {
AppRegistry,
StyleSheet,
Rvar AwesomeProject = React.createClass({
render: function(){
return (&Text&Hello, hanks&/Text&);
}});var styles = StyleSheet.create({});AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
接下来练习 Navigator 的使用, Navigator 标签负责不同界面之间的跳转;
&Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =&
&MySceneComponent
name={route.name}
onForward={() =& {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex,
index: nextIndex,
onBack={() =& {
if (route.index & 0) {
navigator.pop();
基础方法 push , pop , Navigator 的 renderScene 方法可以获取到 navigator 和 route 对象,然后就可使用 navigator 的 push , pop 控制界面.
获取 navigator 和 route 的例子
//...&Navigator
ddebugOverlay={false}
initialRoute={{ title: 'Main', id:'http'}}
configureScence={{ configureScence }}
renderScene={renderSceneAndroid}/&var _ //全局navigator对象//...renderSceneAndroid: function(route, navigator){
_navigator =
if(route.id === 'http'){
&HttpView navigator={navigator} route={route} /&
if(route.id === 'shop'){
&ShopView navigator={navigator} route={route}/&
}//...// 调用push 跳转&TouchableOpacity onPress={ () =& _navigator.push({title:'Http',id:'http'}) }
style={ styles.button }&
&Text&NetWork&/Text&&/TouchableOpacity&
根据route的id来判断跳到哪个界面, 调用 push 添加新的界面, push的参数为 route:字典
安卓返回按键监听
http.js 中获取 navigator 对象,调用 pop 方法退出界面
BackAndroid.addEventListener('hardwareBackPress', function() {
if(_navigator == null){
return false;
if(_navigator.getCurrentRoutes().length === 1){
return false;
_navigator.pop();
return true;});
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致AppInventor专题：如何实现两个页面之间的跳转_林子_新浪博客
AppInventor专题：如何实现两个页面之间的跳转
图1-Screen1
图2-Screen2
假期做了一个猜单词的app,其中一个功能是在主界面上点击“开始”必须让程序进入到做题界面。那么，在AppInventor中如何实现页面的跳转呢？如上图所示，当用户点击图1的开始按钮，界面跳入图2。如图所示，你需要设计两个屏幕，Screen1和Screen2，在Screen1中为Screen1中的“开始”按钮进行逻辑设计，如图所示：
1、拖出按钮抽屉中的单击组块​
图3-当按钮被按下
2、拖出控制块中的打开另一个屏幕事件
图4-打开另一个屏幕&
3、在Text块中拖出字符串块，并填入“Screen2”为新的屏幕赋值
图5-为新屏幕赋值
4、整体的设计图
图6-整体设计图
​用手机或者AI伴侣测试一下，当单击“开始”的时候就很顺利地跳转到做题界面啦！
博客等级：
博客积分：0
博客访问：50,398
关注人气：0
荣誉徽章：&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！