reac-react native打印日志运行安卓怎么看日志

Android 日志管理框架 NativeLogger
日志是任何项目开发中的必须,它可以记录下来的行为,帮助开发者排错,优化系统性能调整系统行为等.既然日志可以帮助我们做很多分析,那么开发者肯定是有很多定制需求的,例如不同环境过滤不同等级的log,格式化输出,输出到文件,打包日志上传分析等等.这里就针对平台开发一套日志框架.后续将持续完善.
github地址:
是否捕获全局异常
是否开启文件日志
文件日志内容格式
SimpleFormatter
日志文件存放路径
/sdcard/native.logs/
日志文件过期时间
日志文件打包周期
适配Android 6.0
格式化输出JSON
格式化输出XML
repositories {
maven { url &/HiJesse/mvn/master/repository/& }
dependencies {
compile &cn.jesse.android:nativelogger:1.0.0&
简单用法-只使用基础的Console log
NLogger.d(&debug&);
NLogger.i(&MainActivity&, &type1&);
NLogger.w(&MainActivity&, &%s&, &type2&);
NLogger.d(&MainActivity&, &%s%d%s&, &type&, 3, &finish&);
NLogger.e(&uncaughtException&, throwable);
相当于直接使用Android SDK中的Log
注意压缩日志文件的onZip回调为子进程
NLogger.getInstance()
.builder()
.tag(&APP&)
.loggerLevel(LoggerLevel.DEBUG)
.fileLogger(true)
.fileDirectory(getApplicationContext().getFilesDir().getPath() + &/logs&)
.fileFormatter(new SimpleFormatter())
.expiredPeriod(3)
.catchException(true, new CrashWatcher.UncaughtExceptionListener() {
public void uncaughtException(Thread thread, Throwable ex) {
NLogger.e(&uncaughtException&, ex);
android.os.Process.killProcess(android.os.Process.myPid());
NLogger.d(&debug&);
NLogger.i(&MainActivity&, &type1&);
NLogger.w(&MainActivity&, &%s&, &type2&);
NLogger.d(&MainActivity&, &%s%d%s&, &type&, 3, & finish&);
NLogger.zipLogs(new IFileLogger.OnZipListener() {
public void onZip(boolean succeed, String target) {
if (succeed)
NLogger.i(&zip&, &succeed : & + target);
配置功能清单中所有属性,并且使用到了压缩日志文件的方法
日志文件路径
解压.zip后得到日志文件
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'Sponsered by
React Native 中文版(含新增 Android 章节)
Facebook 在
大会上推出了基于 JavaScript 的开源框架 ,本中文教程翻译自 。
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。
React Native 交流群
React Native QQ 交流群已加满,请加交流2群: 和大家一起交流学习 React Native
React Native for Android
Facebook 于 2015 年 9 月 15 日发布了 React Native for Android, 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。
新增 Android 相关章节:
如有任何关于翻译、内容或资源推荐,欢迎通过 GitHub 提交 PR 给我们。\(o_X)/
React Native 官网:
GitHub 地址:
React Native 中文教程(For Android)发布
贡献者名单
React Native 中文版 由
创作,采用 进行许可。基于上的作品创作。一个资深iOS开发者对于React Native的看法_Linux新闻_Linux公社-Linux系统门户网站
你好,游客
一个资深iOS开发者对于React Native的看法
来源:CSDN&
作者:zhe13
当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道。
我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头。毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具。
我已经创造了一些我引以为傲的iOS应用&&一些使用Object-C和Xcode构建的应用,通常人们都是这么做的。这两样工具是苹果公司提供的、用来开发iOS应用的,所以,我和其他的苹果开发者都在用。并且当两年前苹果公司发布Swift时,我也毫不犹豫地去尝试它。
Swift依旧被使用在Xcode中,并且依旧是苹果公司推荐的开发方式,所以我很快地深入,并且毫不费力地学会了这门语言。我满足于我的苹果生态系统圈。React Native看上去只是一个小小的乐子,在我的脑海中,一切原生应用必须被 原生 地开发。对正要开始掌握 原生 开发方式的我来说,学习javascript(我并没有这方面的经验)和一种几乎全新的构建app的方式简直是荒废时间。
时间快进到几个月过后,我可以打保票说,我再也不会使用Objective-C或者Swift来开发iOS应用了。
我们接手了一个新的移动应用开发项目,我大概的看了一下设计和需求。正当我要点开Xcode那漂亮的蓝色图标新建一个新的工程时,我们的交互设计师,Adam走过来说,&我们用React Native来做这个东西吧。&
他解释说,这个项目合同的一部分明确提及了要给这个应用做一个安卓版本。尽管React Native并不支持安卓,我们知道Facebook正积极地在这方面研究。理论上来说,如果我们用RN构建了这个应用的iOS版本,很多部分能够直接工作在以后的安卓版本上。
好吧,我并不乐意。我觉得我已经站在了iOS开发能力的顶峰,现在却要我把这一切全部丢弃。在不可避免的学习曲线面前,我怀疑我是不是能够及时地发布一个高质量的产品。但除此之外,我更加质疑RN是否有能力成产一个高质量的产品。现在看来,我甚至没有觉得这样的质疑是不公平的。当时RN作为一个Beta版本刚被公布不久,文档欠缺,开源库和组建的数量稀少,演示代码或者Stack Overflow上的参考几乎没有。
我连看都不想看它一眼。但是我这种闭塞的态度只会带来更多的不良后果。我的第一道坎是学习Flexbox,RN制作UI布局的方式。从最基础的界面构建器开始,纯粹使用代码来布局UI几乎击溃了我的自信。我挣扎着去构建最基础的视觉效果。
但不仅仅是UI&&任何事情都变的不一样。这对于我是最大的挑战。
&每当我止步不前或者不理解的时候,我就告诉自己&如果用Objective-C我能够在五秒钟之内解决它&。每当我发现了RN中的一个BUG(并且bug的数量非常大),我就会想,&oc中根本不会有这种bug,我为啥一定要和RN斗智斗勇呢?&
整整两个星期,我都在工作中痛苦挣扎。我对自己的感觉从一个杰出的iOS开发者变成了一个从未写过一行代码的人。这很受挫折,直到我花费了整整一个礼拜理清了思路。我后退一步,认识到Adam对RN做了许多研究。作为我的交互知道,我不得不信任他,相信他没有把我领入一条错误的道路。我发誓我要在周一投入工作,埋头苦干,假装Objective-C和Swift从来没有存在过,并解决这个项目。
学会去喜欢React
几周之前,我们向App Store提供了第一个React Native应用。对于应用的最终表现结果我真的非常自豪,并且我迫不及待的要开始构建下一个项目了。在仅仅一个月多一点的时间里,我完全踏上了RN的贼船,是什么改变了我的想法呢?
React 范例
在React中,所有UI的组件都被放置在render()方法中,并且被state状态控制。你的render()方法定义了UI在各种状态是如何展现的。当调用setState()的时候,React会找到需要改变的部分并替你修改。想象一个简单的视图,拥有一个&Hello World&标签和按钮。每点击一下按钮,标签会在&Hello World&和&Goodbye World&之间切换。在Objective-C中,我在按钮的句柄中需要一些难堪的if声明,就像下面一样。&
if([label.text isEqual:@&HelloWorld&]){
label.text =@&GoodbyeWorld&;
label.text =@&HelloWorld&;
这样很有用,但是这种UI代码和我第一次创建这个标签的地方(可能在代码中,也可能在界面构建器里)完全脱节。在React中,我们会在state状态中定义一个buttonClicked的bool变量,在render()函数中,标签看起来会是这样的:
{this.state.buttonClicked ? &Hello World& : &Goodbye World&}
并且我们的按钮句柄也会非常简单
this.setState({buttonClicked:!this.state.buttonClicked});
所有和可视化相关的代码都在同一地方,并且由状态控制一切。这使得理解和修复这段代码变的非常容易。
这就是我一开始非常痛恨的UI布局工具,现在变成了RN中我最喜欢的事物之一。我承认一开始非常难以掌握,但一旦你开始使用,它把 为多种不同尺寸屏幕构建UI这件事 变的机器快速和简单。我曾经对Xcode中的可视化界面编辑器十分热衷,相比于Flexbox,它的自动布局还是国语复杂。Flexbox使用的CSS式样式使得样式重用变的和复制粘贴一样简单。其中最棒的事莫过于允许你在一瞬间将样式值改变到完美。
Live/Hot Reload
没错,想看看按钮右移5像素的样子就和command+s一样简单。React Native能够被设置为在iPhone模拟器中自动重绘当前画面而不重建Xcode工程。这非常厉害因为你不仅可以通过避免重新编译儿节省时间,你还能够调整一个深度嵌套在应用中的界面,调整UI而不用回到最初的界面。
现在依旧没有发布,但就快了&&这一定会非常神奇。在最初我对于ReactNative犹豫不决是因为我已经习惯于做原生的iOS开发。对此我从没有过任何的抱怨。但是我也做过原生的安卓开发,这并不让人开心。React Native在安卓上会变的很瘦欢迎,同时我也在期待它的发布。这会改变移动应用开发的现状,通过使用相同的代码来部署两个平台的应用。
想念 Xcode
我还是会想念Xcode,或者说是一个IDE编辑器。我已经有了一个很好的RN开发设置,但这并不容易,Sublime Text和一大堆的插件让我有了语法高亮。sublime能够完成同一个文件中基于变量的自动补全,但始终少了一些Xcode自动补全的稳健性。我还是不得不一直查询开发者文档做参考。
小缺点,比如键入React.PropTypes.f &IDE并不会告诉我我到底在找func还是function,这很让人困惑。我也怀念Xcode的版本控制&&允许我一一比较我上一次git提交的版本和现在的版本,甚至还允许我基于行撤销一些特别的改动。我意识到第三方程序能够帮助我完成这些,但是对IDE来说最棒的事情就是将这些囊括到一个包中。(译者使用VSCode可以解决这些问题)
为了运行RN项目,我需要终端运行npm,Chrome用来debug,sublime来编辑代码,最终还需要Xcode来运行这个项目并打开模拟器。在大项目中,这些都是细小的抱怨,但是当我面对RN的时候这依旧是缺点。对于Nuclide(Facebook的新IDE)我抱有很高的期望,希望它能结束所有的这些缺点。
Facebook还没有也不会去提供所有iOS转向React Native的API,所以对于那些缺失的片段他们提供了桥接js的方法。当我第一次深入RN的时候,这方面的文档非常的糟糕。每当我意识到我需要连接某些事物的时候,我差点就对RN放弃了,因为这些事情早就能够在Objective-C中正常运作。但是当她们更加详细地解释了桥接过程,提供优秀的实例之后,这就无所惧怕了。它仍然是一个麻烦,但是我能够预见到开源社区和nom上会有所有的桥接方案。事实上,大多数的iOSAPI已经存在了。
漏洞,文档,开源社区
大概所有我最初关于RN的抱怨现在都已经消失殆尽,如果我从今天开始学习它的话。漏洞每天都在被修复,新版本每一周都在迭代。文档还需要加把劲,但比以前好多了。Facebook和开源社区对于研发这个框架变的十分严谨。人们开始聚集在Github和Stack Overflow上探讨它。如果你是一个正在考虑尝试RN的iOS开发者,你要知道你不是一个人在战斗。RN非常棒,你应该带着开放的态度拥抱他。不要像我一样吧自己局限在温室里。
走出温室,世界才刚开始。
本文永久更新链??地址:
相关资讯 & & &
& (04月27日)
& (12/18/:43)
& (09/16/:40)
& (04月27日)
& (10/08/:56)
& (08/28/:42)
   同意评论声明
   发表
尊重网上道德,遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款
Ellie 发表于 作者能提供一些react-native的优秀实例代码?刚入坑还缺乏学习的范例
(0) lun2001 发表于 好文!写出了由xcode转rn的心路历程!Sponsered by
与现有的应用程序集成
由于 React 并没有做出关于你其他的技术堆栈的假设——通常在 MVC 中简单的用 V 来表示——这很容易嵌入到现有 non-React Native 应用程序中。事实上,它与另外的最佳实践社区工具集成了,如 。
- gem install cocoapods
- brew install node
用 CocoaPods 安装 React Native
是 iOS/Mac 开发的管理工具包。我们需要用它来下载 React Native。如果你还没有安装 CocoaPods,请查看。
当你准备使用 CocoaPods 工作时,添加以下行到 Podfile 中。如果你没有,那么在你的项目的根目录下创建它。
pod 'React'
pod 'React/RCTText'
# Add any subspecs you want to use in your project
记得安装所有你需要的 subspecs。没有 pod 'React/RCTText',&Text& 元素不能使用。
然后安装你的 pods:
$ pod install
创建你的 React Native 应用程序
有两块你需要设置:
根 JavaScript 文件,该文件将包含实际的 React Native 应用程序和其他组件
包装 Objective - C 代码,将加载脚本并创建一个 RCTRootView 来显示和管理你的 React Native 组件
首先,为你的应用程序的 React 代码创建一个目录,并创建一个简单的 index.ios.js 文件:
$ mkdir ReactComponent
$ touch index.ios.js
为 index.ios.js 复制 & 粘贴以下 starter 代码——它是一个 barebones React Native 应用程序:
'use strict';
var React = require('react-native');
var styles = React.StyleSheet.create({
container: {
backgroundColor: 'red'
class SimpleApp ponent {
render() {
&View style={styles.container}&
&Text&This is a simple application.&/Text&
React.AppRegistry.registerComponent('SimpleApp', () =& SimpleApp);
SimpleApp 将是你的模块名称,这将在后面使用。
将容器视图添加到你的应用程序中
现在,你应该为 React Native 组件添加一个容器视图。在你的应用程序中它可以是任何的 UIView。
但是,为了使代码简洁,让我们把 UIView 归入子类。让我们把它命名为 ReactView。打开你的 Yourproject.xcworkspace,并创建一个新类 ReactView(你可以把它命名为任何你喜欢的名字:))。
// ReactView.h
#import &UIKit/UIKit.h&
@interface ReactView : UIView
在一个视图控制器中,想要管理这一视图,继续添加一个出口并将其连接:
// ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactV
在这里我简单的禁用了 AutoLayout。在实际产品中,你应该自己打开 AutoLayout,并且设置约束。
为容器视图添加 RCTRootView
准备好学习最有趣的这部分了吗?现在我们将在你的 React Native 应用程序存在的位置创建 RCTRootView。
在 ReactView.m 中,我们首先需要用 index.ios.bundle 的 URI 启动 RCTRootView。index.ios.bundle 将被 packager 创建,并由 React Native 服务器服务,这将在稍后讨论。
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// To generate that file, run the curl command and add the output to your main Xcode build target:
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName: @"SimpleApp"
launchOptions:nil];
然后把它作为 ReactView 的子视图添加。
[self addSubview:rootView];
rootView.frame = self.
启动开发服务器
在根目录,我们需要启动 React Native 开发服务器。
(JS_DIR=`pwd`/ReactC cd Pods/R npm run start -- --root $JS_DIR)
这个命令将在我们的 CocoaPods 依赖中启动一个 React Native 开发服务器,来创建捆绑脚本。——root 选项表明 React Native 应用程序的根——这将是我们包含单一 index.ios.js 文件的
ReactComponents目录。该运行的服务器将通过 http:/ / localhost:8081 / index.ios.bundle 把 index.ios.bundle 打包成可访问的文件。
编译和运行
现在编译并运行你的应用程序。你将看到你的 React Native 应用程序在 ReactView 内部运行。
Live 也从模拟器重新加载工作!你已经得到了一个简单的完全封装在 Objective–C UIView 子类中的 React 组件。
所以,当 RCTRootView 初始化时,它会尝试从 React Native 开发服务器中下载,解析并运行包文件。这意味着你所需要做的就是为 RCTRootView 实现你自己的容器视图或视图控制器——RCTRootView 摄取了捆绑的 JS 并呈现出你的 React 组件。万岁!
你可以在查看一个示例应用程序的完整源代码。}

我要回帖

更多关于 react native运行项目 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信