rnandroid
‘壹’ 区分页面是rn还是android原生
android用的是java语言开发的,RN是用JS语言开发的。你可以看一下app的特殊效果,有web样式独有的就是RN,原生的效果和动画会给人更稳定的感觉
‘贰’ 如何评价 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 Android 实现本地组件的安装
使用RN-android 时有时会发现,运行某个组件时,报js组件找不到的问题,参考下面的步骤:
demo 参考:
https://github.com/larsvinter/react-native-awesome-button
在js中 require失败的问题,大多数是require的那个东西(实际就是一个js文件),并没有部署在当前的node服务器里,所以解决办法就是把那个js文件手动一份到启动react-js的node服务器目录下
npm install -g 中-g是globel的意思
require 寻找顺序是依次寻找上级目录
可以通过react-native android在当前目录下创建一个包括rn骨架的工程
默认引用index.android.js
直接自定义使用也是不行的
Command
`run-myReactAndroid` unrecognized Usage:
react-native
Commands:
start: starts the webserver install: installs npm react components
bundle: builds the javascript bundle for offline use new-library:
generates a native library bridge android: generates an Android
project for your app
packager的启动可以执行 react-native start
可能遇到一些error【graldew wrapper 出错】,使用 gradlew installDebug/installRelease 直接执行
$ ./gradlew assemble -为所有构建类型创建apk
$ ./gradlew check 运行所有的检查,比如说Android Lint,如果发现问题可终止任务 $ ./gradlew build 运行以上两个任务
$ ./gradlew clean -清除生成的apk ++++
$ ./gradlew connectedCheck - 在设备上运行测试
$ ./gradlew deviceCheck - 远程设备运行测试
$ ./gradlew installDebug/installRelease - 在设备商安装指定版本
$ ./gradlew uninstall - 卸载
所有gradlew命令:
luoyuandeMacBook-Pro% gradlew tasks
:tasks
------------------------------------------------------------
All tasks runnable from root project
------------------------------------------------------------
Android tasks
-------------
androidDependencies - Displays the Android dependencies of the project.
signingReport - Displays the signing info for each variant.
sourceSets - Prints out all the source sets defined in this project.
Build tasks
-----------
assemble - Assembles all variants of all applications and secondary packages.
assembleAndroidTest - Assembles all the Test applications.
assembleDebug - Assembles all Debug builds.
assembleRelease - Assembles all Release builds.
build - Assembles and tests this project.
buildDependents - Assembles and tests this project and all projects that depend on it.
buildNeeded - Assembles and tests this project and all projects it depends on.
clean - Deletes the build directory.
compileDebugSources
compileDebugUnitTestSources
compileReleaseSources
compileReleaseUnitTestSources
mockableAndroidJar - Creates a version of android.jar that's suitable for unit tests.
Build Setup tasks
-----------------
init - Initializes a new Gradle build. [incubating]
wrapper - Generates Gradle wrapper files. [incubating]
Help tasks
----------
components - Displays the components proced by root project 'AliReactAndroid'. [incubating]
dependencies - Displays all dependencies declared in root project 'AliReactAndroid'.
dependencyInsight - Displays the insight into a specific dependency in root project 'AliReactAndroid'.
help - Displays a help message.
projects - Displays the sub-projects of root project 'AliReactAndroid'.
properties - Displays the properties of root project 'AliReactAndroid'.
tasks - Displays the tasks runnable from root project 'AliReactAndroid' (some of the displayed tasks may belong to subprojects).
Install tasks
-------------
installDebug - Installs the Debug build.
installDebugAndroidTest - Installs the android (on device) tests for the Debug build.
uninstallAll - Uninstall all applications.
uninstallDebug - Uninstalls the Debug build.
uninstallDebugAndroidTest - Uninstalls the android (on device) tests for the Debug build.
uninstallRelease - Uninstalls the Release build.
Verification tasks
------------------
check - Runs all checks.
connectedAndroidTest - Installs and runs instrumentation tests for all flavors on connected devices.
connectedCheck - Runs all device checks on currently connected devices.
connectedDebugAndroidTest - Installs and runs the tests for debug on connected devices.
deviceAndroidTest - Installs and runs instrumentation tests using all Device Providers.
deviceCheck - Runs all device checks using Device Providers and Test Servers.
lint - Runs lint on all variants.
lintDebug - Runs lint on the Debug build.
lintRelease - Runs lint on the Release build.
test - Run unit tests for all variants.
testDebugUnitTest - Run unit tests for the debug build.
testReleaseUnitTest - Run unit tests for the release build.
Other tasks
-----------
jarDebugClasses
jarReleaseClasses
To see all tasks and more detail, run with --all.
Adding Android to an existing React Native project
If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:
Update the
react-native
dependency in your
package.json
file to
the latest version
$ npm install
$ react-native android
‘肆’ rn运行在安卓真机上怎么reload
主要通过以下几个步骤: 1、手机通过数据线连接在电脑上 2、设置android手机为USB调试模式。步骤: menu- 设置 - 应用程序 - 开发 , 选择【USB调试】 3、如果是window系统,系统会提示安装驱动: 选择正确的android sdk安装目录,然后点击下一步,系统就开始安装驱动了 4、驱动安装完成之后,重启电脑(通常系统会有“安装新驱动,重启才能生效”的提示),这但应该明白吧 5、重复第1步和第2步,打开命令窗口,检测手机设备是否已经被识别,如下所示: “HT99YLG11834 device”就是检测到得手机设备 6、接下来就开始在eclipse上调试android程序了, 右击android工程-Run as-Android Application ,弹出如下窗口:(重新启动系统之后才有这样的效果) 7、选中手机设备,点击OK之后,程序就开始在真机上安装了,控制台输出如下信息: 8. 设置应用程序为调试模式。操作: 编辑AndroidManifest.xml 增加调试参数android:debuggable=true, 如下: <application android:icon=@drawable/icon android:label=@string/app_name android:debuggable=true 9. 执行真机调试操作:ECLIPSE调试对话框中,Target窗口中选择Manual,点击【debug】按钮,选择真机设备,开始调试。 注:不管是否启用ECLIPSE环境,任何Android软件只要在真机上运行发生异常,都可以在命令行窗口下查看具体异常信息: 执行:./adb logcat 可以查看到更多的系统异常消息。在这些消息中要注意查看Caused by:打 头的行,这些行指明了在哪行代码出的错误10、运行这个应用程序,这样就可以使用手机来测试了
‘伍’ react-native 怎么运行在android
楼主:不太清楚你想表达什么意思,但是你想使用RN开发Android应用,首先你要先搭建好开发环境,可以参考Facebook的官方文档:https://facebook.github.io/react-native/docs/getting-started.html
搭建好开发环境后,运行下面几个命令就可以得到一个RN项目:
react-nativeinitAwesomeProject
cdAwesomeProject
react-nativestart
react-nativerun-android
你可以选择在手机上或者模拟器上运行项目,使用adb devices可以查看连接到你电脑的手机或者模拟器。
当然,如果想学习RN开发的话,需要了解的知识还是很多的,但是学任何一门技术都是有一定的困难,网上有很多关于RN的入门教程,但最重要的还是官方文档,近期我在做一个RN的实战项目教程,欢迎Q我:879942736了解学习。
‘陆’ 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 在真机上运行流畅吗
1、不特别优化的情况下,RN的流畅方面秒杀绝大部分H5的方案还是毫无压力的。
2、如同原生开发一样,不正确的使用、某些限制、超负荷的使用一样会会导致卡顿。RN从0.15开始,提供了较为完善的方法去检测&优化,然而目前还在实验中,不能说是很完善。
3、目前在安卓上还存在一个比较重要的内存问题,需要等待官方解决,临时的解决方案需要Server的支持。
作者:邓鋆
链接:http://www.hu.com/question/37349514/answer/73028469
来源:知乎
着作权归作者所有,转载请联系作者获得授权。
‘捌’ rn android 投屏到电脑 如何实现 代码
不知道你说的是啥,我投屏用的是投屏器,某宝几十块钱一个。
‘玖’ React Native是未来趋势,作为Android开发者的我,现在要怎么办
不要慌张,rn只是针对快速开发的人来说必须接触的,还有就是开发运用的。
很多公司都是有硬件的很多都是安卓原生开发,主要是看从业的公司和市场,不一定都是要用rn开发的,目前市场上rn还处于观望期,可以自行学习。。
学习就去rn中文网,定时更新,坑在他们的教学用mac机。