Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于本工程的导航路由设计思想 #11

Open
codthing opened this issue Nov 22, 2020 · 2 comments
Open

关于本工程的导航路由设计思想 #11

codthing opened this issue Nov 22, 2020 · 2 comments

Comments

@codthing
Copy link

codthing commented Nov 22, 2020

本工程中,在/pages/index.js中使用的是BottomTabNavigator
这种方式在我理解看来是App一次性加载完所有的Screen屏幕内容。
如果:
1.单个Screen的内容消耗的性能很大(比如3D),这对性能要求就很高。
2.当想从 商品Screen 收藏(Like)一些内容,在 收藏Screen 中展示,这种情况似乎用 ”双页面“ 更好。

我的疑问是:

  1. 为什么这样子设计?
  2. 如果这样设计不合理,用什么方式改良?

谢谢~

@xuyuanxiang
Copy link
Owner

xuyuanxiang commented Nov 23, 2020

本工程中,在/pages/index.js中使用的是BottomTabNavigator
这种方式在我理解看来是App一次性加载完所有的Screen屏幕内容。
如果:
1.单个Screen的内容消耗的性能很大(比如3D),这对性能要求就很高。
2.当想从 商品Screen 收藏(Like)一些内容,在 收藏Screen 中展示,这种情况似乎用 ”双页面“ 更好。

我的疑问是:

  1. 为什么这样子设计?
  2. 如果这样设计不合理,用什么方式改良?

谢谢~

路由不是umi-react-native这个项目设计和实现的。

umi-react-native的动机是将umi框架的一些规约,编程思想,周边配套的框架、插件等等由web开发嫁接到RN的开发中来。

umi的领域中显而易见只有StackNavigator这一种模型,我在UMIRNExample这个示例工程的/pages/index.js中用了react-navigation的BottomTabNavigator仅仅是为了演示如何创建底部Tab页切换视图的场景。

至于你所关心的性能问题,可以参看react-navigation的文档或者直接研究它的源码,我没有原生iOS/Android的开发背景,无法深入的阐述。

据我所知react-navigation每种类型的路由,其视图似乎都是一个独立的原生视图,似乎只有当前活动的视图窗口(Activity)享有系统性能的开销,切到后台的视图应该都被系统回收了。如果一定要类比Web开发中的浏览器,react-navigation并不是全都加载到一个页面中,切换视图时在同一个标签页中不断重绘和销毁,而是每次路由到一个Screen都相当于新开了一个标签页窗口。

@codthing
Copy link
Author

@xuyuanxiang
谢谢!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants