Ⅰ android 打开rn页面怎么平滑过渡
不讲道理式。特点:不管3721,先在PagerAdapter的getCount();里返回一个很大的值。保守的返回个100,极端的直接Integer.MAX_VALUE。看到这里估计就已经有很多孩子笑了,这尼玛跟大学C语言课本上,数组长度未知就定义个1000单位的思想简直如出一辙啊有木有!!!好吧,那么这种方法显然并没有真的解决问题,虽然不会有几个用户真有耐心去滑动Integer.MAX_VALUE / 2次。。。不过鉴于目前网上其它方法都有这样那样的缺陷,还是有不少人宁愿选择这个的。那么我就说详细点吧。这个方法后续操作中,比较关键的步骤有两点: 一、一定要设置初始位置为Integer.MAX_VALUE / 2,即
[java] view plain
setCurrentItem(Integer.MAX_VALUE / 2);
Ⅱ 区分页面是rn还是android原生
android用的是java语言开发的,RN是用JS语言开发的。你可以看一下app的特殊效果,有web样式独有的就是RN,原生的效果和动画会给人更稳定的感觉
Ⅲ android rn 是什么意思
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this
Ⅳ 如何评价 React Native Android
React Native项目成员Tom Occhino发表的React Native: Bringing modern web techniques to mobile(墙外地址)详细描述了React Native的设计理念。Occhino认为尽管Native开发成本更高,但现阶段Native仍然是必须的,因为Web的用户体验仍无法超越Native:
1. Native的原生控件有更好的体验;
2. Native有更好的手势识别;
3. Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。
Occhino没提到的还有Native能实现更丰富细腻的动画效果,归根结底是现阶段Native具有更好的人机交互体验。笔者认为这些例子是有说服力的,也是React Native出现的直接原因。
图3 - Occhino在F8分享了React Native(Keynote)
Learn once, write anywhere
“Learn once, write anywhere”同样出自Occhino的文章。因为不同Native平台上的用户体验是不同的,React Native不强求一份原生代码支持多个平台,所以不提“Write once, run anywhere”(Java),提出了“Learn once, write anywhere”。
图4 - “Learn once, write anywhere”
这张图是笔者根据理解画的一张示意图,自下而上依次是:
1. React:不同平台上编写基于React的代码,“Learn once, write anywhere”。
2. Virtual DOM:相对Browser环境下的DOM(文档对象模型)而言,Virtual DOM是DOM在内存中的一种轻量级表达方式(原话是lightweight representation of the document),可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信(React Native通信机制详解 ? bang's blog)。
3. Web/iOS/Android:已实现了Web和iOS平台,Android平台预计将于2015年10月实现(Blog | React)。
前文多处提到的React是Facebook 2013年开源的Web开发框架,笔者在翻阅其发布稿时,发现这么一段:
图5 - 摘自React发布稿(2013)
1. 加亮文字显示2013年已经在开发React Native的原型,现在也算是厚积薄发了。
2. 最近另一个比较火的项目是Flipboard/react-canvas · GitHub(详见 @rank),渲染层使用了Web Canvas来提升交互流畅性,这和上图第一个尝试类似。
React本身也是个庞大的话题不再展开,详见facebook/react Wiki · GitHub。
笔者认为“Write once, run anywhere”对提升效率仍然是必要的,并且和“Learn once, write anywhere”也没有冲突,我们内部正在改造已有的组件库和HybridAPI,让其适配(补齐)React Native的组件,从而写一份代码可以运行在iOS和Web上,待成熟后开源出来。
持续更新…
二、规划
下图展示了业务和技术为React Native所做的改造:
图6 - 业务和技术改造图6 - 业务和技术改造
自下而上:
1. React Node:React支持服务端渲染,通常用于首屏服务端渲染;典型场景是多页列表,首屏服务端渲染翻页客户端渲染,避免首次请求页面时发起2次http请求。
2. React Native基础环境:
2.1. Framework集成:尽管React Native放出了Integration with Existing App文档,集成到现有复杂App中仍然会遇到很多细节问题,比如集成到天猫iPad客户端就花了组里iOS同学2天的时间。
2.2. Networking改造:主要是重新建立session,而session通常存放于http header cookie中,React Native提供的网络IO fetch和XMLHttpRequest不支持改写cookie。所以要不在保证安全的条件下实现fetch的扩展,要么由native负责网络IO(已有session机制)再通过HybridAPI由JS调用,暂时选择了后者。
2.3. 缓存/打包方案:只要有资源从服务器端加载就避免不了这个话题,React Native也是如此,缓存用于解决资源二次访问时的加载性能,打包解决的是资源首次访问时的加载性能。
3. MUI是一套组件库,目前会采用向React Native组件补齐的思路进行改造。
4. HybridAPI是阿里一组Hybrid API,此前也在多个公开场合(如传感器 @杭JS)分享过不再累述,React Native建立了自己的通信机制,看起来更高效(未验证),改造成本不大。
5. 最快的一个业务将于4月中上线,通过最初几个业务改造推动整体系统的改造,如果效果如预期则会启动更大规模的业务改造。
更多详细规划和进展,以及性能、稳定性、扩展性的数据随后放出。
三、风险
1. 尽管Facebook有3款App(Groups、Ads Manager、F8)使用了React Native,随着React Native大规模应用,Appstore的政策是否有变不得而知,我们只能往前走一步。
* 更新:
2015.7.28 AppStore审核政策调整:允许运行于JavascriptCore的动态加载代码,下图是此前的审核政策,对比加亮部分的改变。
2. React Native Android 已于2015.9.15发布,第一个使用RN开发的Android App(Facebook Adverts Manager)6.29已上架Play了。
3. iOS6 javascriptCore.framework 为私有,如在iOS6上使用有拒审风险。(http://stackoverflow.com/questions/23514579/javascriptcore-framework-availability-on-ios),可以通过JavaScriptCore-iOS · GitHub这个库代替,涉及改动较多,只在实验阶段支持了iOS6。
4. ListView 性能问题需要持续关注(ListView renders all rows? · Issue #499 · facebook/react-native · GitHub)
React Native相对于Webview和Native的优势和劣势 @berg 也给出了较详细的描述,可以相互参照。
Ⅳ 如何愉快地调试一个 React Native for Android APP
首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关!
确保你的设备已经被成功连接,可以输入adb devices核实:
在右边那列看到device说明你的设备已经被正确连接了。注意,你只应当连接仅仅一个设备。
因为如果你连接了多个设备(包含模拟器在内),你后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保adb devices的输出只有一个是连接状态。
现在我们可以运行 react-native run-android 来在设备上安装并启动我们的应用了
这
句命令执行后,实际上就是在本地起一个node server,并且将你的android
project编译打包,再上传到你的手机上。然后当js文件有改动或debug模式下手动选择reload
js时候会自动更新bundle文件,达到改动js文件后即时显示的调试效果。
这“红屏”又是什么鬼?别着急,是正常的,我们需要连接上开发服务器,下面的步骤会解决这个问题。
摇晃手机,或者运行adb shell input keyevent 82,可以调出开发者菜单。
点击进入Dev Settings
点击Debug server host for device
输入你电脑的IP地址和端口号(譬如我的是192.168.3.15:8081)
注意:如果你的设备是android5.0以上版本(API 21+),就不用折腾这步了
而是:运行adb reverse tcp:8081 tcp:8081 (建立一个从设备向电脑转发的端口,前提是设备和电脑通过USB相连)
不需要更多配置,你就可以使用Reload JS和其它的开发选项了
Chrome开发者工具
在Chrome上调试js代码,需要在开发菜单中选择Debug JS,这会打开一个新的http://localhost:8081/debugger-uitab页。
在
Chrome中,按下⌘ + option + i或者选择视图(View) -> 开发者(Developer) ->
开发工具(Developer Tools)来打开开发工具控制台。打开有异常时暂停(Pause On Caught
Exceptions)选项,能够获得更好的开发体验。
Chrome中并不能直接看到App的用户界面,而只能提供console的输出,以及在sources项中断点调试js脚本。
要查看APP日志?
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。
实时刷新
这个选项可以在你的js代码变更了之后,自动触发所连设备或者模拟器自动刷新。
开启方法:先打开开发菜单,选择Dev Settings,然后选择Auto reload on JS change选项。
到此才能完整的调试Android RN, 繁琐到累绝不爱。。
等等,能否想办法简化一下过程?
既然我们的RN项目里包含了完整的android工程,何不把android工程导入到android studio 去运行?不但可以同时查看js的日志和native的日志,而且开发android的同学最熟悉AS,利用AS的快捷键和各类插件提升调试效率。
have a try , 答案是肯定的!
执行react-native start 也可以起一个node server,只是它不帮你安装APP到device 。
以上就是我踩坑后整理的方法,按这套组合拳就可以愉快地调试了。水平有限,抛砖引玉,如果你有更好的方法!欢迎拍砖!
此处插播一个广告:拍砖请拍到我们的杏树林开放空间(246078103),期待感兴趣的同学加入。
之后要解决的一些issue
1,关于设备MinSdkVerison
RN 只支持Android4.1.2(API16)以上设备,4.0根据网络数据大概占比0.7比例,随着大部分app已经不支持4.0以下设备了,这块倒还可以接受 , 目前我们的病历夹是3.0(API-11) , 口袋是4.0(API-14)
2,我们的androidRN现在只能通过Debug JS才能渲染出界面,而不能正常的用Reload JS
3,在界面跳转时卡的令人发指