设置
☻关于
℡留言
发表时间为日
文章概要 之前购买的 GreenVPN 最近死活越不了墙，在阿里云上尝试用 wget 下载资源，貌似能够连接上。于是尝试在阿里云上配置 shadowsocks，配置时提示需要使用 pip，而使用 pip 就得升级 Python(≥2.6)，折腾了一番，升级了 Python 也安装了 pip，最后却发现下载速度奇慢。
发表时间为日
文章概要 欢迎向小胡子哥提问，由于个人精力有限，并不是每一个问题都会去回答。
发表时间为日
文章概要 最近办了一张招行香港一卡通，流程比较长，遇到的问题也很多，趁着自己还记得比较清楚，写下来备忘。这张卡有什么用，这篇豆瓣帖子 可以解决你的疑惑。简单来说，你要把国内的钱放到香港或者国外花，你需要有类似的卡；你要把国外的钱转到国内，你依然需要类似的卡。它的作用就是抹除货币通行差异。没学过经济学和相关知识，以上是我的浅薄理解。
发表时间为日
文章概要 古人对「著作」和「编述」两个词的含义区分的比较明显，子曰：“述而不作，信而好古”，意思是，只负责传承古代的优秀文化，不搞改革，相信并且喜欢玩味古代的东西。那个时代产出的知识体量小，而现在不一样，信息时代，很多内容都是在沉淀的知识中做微创新、微著作。如果要把博客文章划进这两个词，著作或许更加适合些。我们在博客中的论述，稍微有点含量的，都可以称之为著作。
>> 我的旧博客（博客园荣誉博客）
>> 大额大额哼歌等日落
>> 原来大学我俩一个团队的~
>> 深度交流的一个好朋友
>> 好吧，蛐蛐同学
>> 阮老师,哈哈,第一次设计博客就是抄的你的样式
>> 阿安同学
>> 二次元化身React有三个东西，React JS 前端Web框架，React Native 移动终端Hybrid框架，React Web是一个源码转换工具（React Native&转 Web，并之所以特别提出，是觉得还有些用处）。&
React、React Native共同特点
Facebook 的内部项目
Learn once, write anywhere，而不是Write once, run anywhere。简单说就是，让你在Web、Mobile原生的开发套路一样，但你还是需要写两套代码。Web Components的理解与实现。
普通文本编辑器、Notepad++等即可
支持ES6，组件化，看起来像NodeJS，所有代码是写在js里的，无论是样式还是模板。
易复用：组件的复用变得非常容易，它们都是独立的。
利解耦：使得组件的实现关注分离，利于解耦，更容易被理解和维护。
规范性：利用到ES6的模块加载和导出，使得代码简单就能按规范的写。也因为规范实现，使得Github上有的，就可以拿来用。
可组合：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件。
基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
浏览器兼容
一般需要先一层编译，或者解析
PS：React JS我并没有用过，不过写法是React Native一样。
React Native
用js开发出效果接近原生的Android、iOS应用。原因UI组件是原生实现原因，效果是相近原生的。（做得像原生，那就得用原生做）
PS：目前Saas Link里面的应用的效果在Android机器还是不大好
iOS、Android按照官方文档搭建，大概1个小时。
1. 能够在Chrome调试js，debug
2. 由于组件由原生渲染，不能调试View
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
组件生命周期
提供植入原生应用
它很容易嵌入到一个并非由React Native开发的应用当中。作为应用的一部分。
React js的代码能不能直接转React Native?
ReactJs和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。
只不过ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。
真不能Write once, run anywhere?
淘宝前端团队(FED)把 React Native 的组件做了一个 Web 端的实现，并提供相关打包工具，让你可以直接打包出一份可以跑在 Web 端的代码。&&React-Web
PS：我在本地尝试过，没跑起来，不过据说是可以的。
不过即便是能够转换，需要面对几个问题：
1. 这个转换的工具能否及时跟上React Native发展。
PS：要是这个团队不维护了或更新不及时（目前已经存在这种问题），这种依赖挺麻烦。
2. 存在转换不了的React Native原生功能，这部分还需要做兼容。
3. 没有完善的社区论坛，有问题解决不了。（目前只是在Github）
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：
阅读(...) 评论()react-native 与 react-web 的融合
招聘信息：
关于对于react-native在实际中的应用， facebook官方的说法是react-native是为多平台提供共同的开发方式，而不是说一份代码，多处使用。 然后一份代码能够多处使用还是很有意义的，我所了解到的已经在尝试做这件事情的：现阶段大家都是在摸索中，且react-native 还不够成熟，为此我也想通过一个实际的例子提前探究一下共享代码的可行性。下面是我以SampleApp做的一个简单demo， 先奉献上截图：web 版本react-native版本初步想法组件react-native基本上是View套上Text这样来布局，为了做web和native的兼容，我们得提供继承版本的View ，针对不同的平台返回不同做兼容，我们将提供：Share.View -> View (reac-native = View , web = div)Share.P + Share.Span -> Text (Text在react-native中分为块级别和inline级别所以得用两个元素来区分)样式我们知道react-native的样式是css很小的一个子集，大概支持50种属性，为了做到web和native使用同样地样式，那么我的想法是：使用css文件来编写样式，通过编译的方式生产不同平台需要的样式对于web，使用auto-prefixel处理，生产web兼容的css代码对于react-native，生成对应的styles.jscss的写法用OOCSS的方式这样做的另外一个原因是，因为css是全集，react-native是子集，全集到子集可以通过删减来处理，但是如果想通过子集到全集就会很麻烦（react-style就是通过react-native来生成css）。 且这样做还有很多好处，例如我们可以支持react-native里边不支持的css写法，例如padding: a b c d; 这种写法很容易得到兼容。其实这里，无论react-native还是react-web都支持style={}这样的写法. 上面例子中的web截图其实是没有引用css的，但inline样式对于web来说并不是优选。 后面也做了通过react-native的css到web的css的尝试， 那种方案在样式上可以完全基于react-native来写，直接兼容web。实现思路首先大概整理一下我们需要解决的问题：如何区分web和nativejs如何对应不同的平台来编译，因为react-native使用的是自己的依赖管理packagercss如何编译为js代码结构应该是怎样的问题一： 如何区分web和nativereact-native 里边会有window变量吗？我试了一下，是有的，那window变量里边不可能有location，document之类的吧， 借着这种想法，可用如下方法来区分native和web&var&isNative&=&!window.问题二：如何对应不同平台打包对于react-native，是通过packager来打包的，具体的实现和逻辑可以随时查看packager的readme文档。 那我们怎么将适用于native的代码打包成web的代码，首先想到的是browserify, webpack。 都是遵循commonJs规范，个人更喜欢前者， 用它来应该足以满足需求。问题三： css如何编译为js前面提到了native-css , 可以用它来帮助我们完成打包。问题四：代码结构应该是怎样的web和native的代码都写在同一个地方，如何做区分呢？ 这个问题当然最好就是不做区分，或者就像女生的衣服，期望是越少越好，但永远不可能木有（猥琐了：-】）。我设想中的一个最简模型的目录结构，web和ios有不同的入口，web和ios有单独的目录， 组件共享， 如下：├──&compo.js&&&&&&&&&&&&//&我们会使用到得公共组件
├──&styles.css&&&&&&&&&&//&compo的样式文件
├──&index.web.js&&&&&&&&//&web&入口
├──&index.ios.js&&&&&&&&//&ios&入口
├──&shared.js&&&&&&&&&&&//&做兼容的共享变量文件
├──&ios&&&&&&&&&&&&&&&&&//&ios&目录
└──&web&&&&&&&&&&&&&&&&&//&web&目录
&&&&├──&index.html&&&&&&//&web&页面
&&&&├──&index.web.js&&&&//&打包过后的js
&&&&└──&react.js&&&&&&&&//&react.js依赖好像很复杂的样子， 其实相对于原本的SampleApp，只是多了index.web.js , web目录, shared三者。 然后style通过style.css来描述。具体实现我们已经整理了具体的实现思路，下面是我就会直接吐出我的实现代码， 重点的地方都会在源码里边有注释先看应用代码：iOS入口：index.ios.js&&&&/**
&&&&&*&Sample&React&Native&App
&&&&&*&/facebook/react-native
&&&&'use&strict';
&&&&var&React&=&require('react-native');
&&&&var&Compo&=&require('./compo');
&&&&React.AppRegistry.registerComponent('ShareCodeProject',&()&=>&&Compo);web入口：index.web.js&&&&/**
&&&&&*&for&web
&&&&var&Compo&=&require('./compo');
&&&&React.render(,&document.getElementById('App'));样例组件：compo.js&&&&//&依赖的公共库，通过它获取兼容的组件
&&&&var&Share&=&require('./shared');
&&&&//&styles是style.css&build过后生成的style.js
&&&&var&styles&=&require('./styles');
&&&&var&React&=&Share.R
&&&&&&View,
&&&&&&Span
&&&&var&Compo&=&React.createClass({
&&&&&&render:&function()&{
&&&&&&&&return&(
&&&&&&&&&&&
&&&&&&&&&&&&&&Welcome&to&React&Native!
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&&&&To&get&started,&edit&index.ios.js
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&&&&Press&Cmd+R&to&reload,{'\n'}
&&&&&&&&&&&&&&Cmd+Control+Z&for&dev&menu
&&&&&&&&&&&
&&&&&&&&);
&&&&module.exports&=&C组件样式: style.css&&&&/**
&&&&&*&大家可能发现了css的写法还是小驼峰，是的不是横杠，暂时我们还是以这种方式处理
&&&&&*&native-css&目测不支持横杠，（自己重写native-css相对来说是比较容易的，完全可以做到css兼容到react-native的css子集）
&&&&.container&{
&&&&&&&&flex:&1;
&&&&&&&&justifyContent:&
&&&&&&&&alignItems:&
&&&&&&&&backgroundColor:&#F5FCFF;
&&&&.welcome&{
&&&&&&&&fontSize:&20;
&&&&&&&&textAlign:&
&&&&&&&&margin:&10;
&&&&.instructions&{
&&&&&&&&textAlign:&
&&&&&&&&color:񑘕
&&&&&&&&marginBottom:&5;
&&&&}index.htmlShare部分的处理shared.js&&&&var&Share&=&{};
&&&&var&React&=&require('react-native');
&&&&var&isNative&=&!window.
&&&&&*&判断是web的时候，重新赋值React
&&&&if&(window.React)&{
&&&&&&&&React&=&window.R
&&&&Share.React&=&R
&&&&&*&做底层的兼容，&当然这里只是做了一个最简demo，具体实现的时候可能会对props做各种兼容处理
&&&&if&(!isNative)&{
&&&&&&&&Share.View&=&React.createClass({
&&&&&&&&&&&&render:&function()&{
&&&&&&&&&&&&&&&&return
&&&&&&&&&&&&}
&&&&&&&&});
&&&&&&&&Share.P&=&React.createClass({
&&&&&&&&&&&&render:&function()&{
&&&&&&&&&&&&&&&&return
&&&&&&&&&&&&}
&&&&&&&&});
&&&&&&&&Share.Span&=&React.createClass({
&&&&&&&&&&&&render:&function()&{
&&&&&&&&&&&&&&&&return
&&&&&&&&&&&&}
&&&&&&&&});
&&&&}&else&{
&&&&&&&&//&alert('isNative')
&&&&&&&&Share.View&=&React.V
&&&&&&&&Share.P&=&React.T
&&&&&&&&Share.Span&=&React.T
&&&&&&&&Share.Text&=&React.T
&&&&module.exports&=&Sbuild打包程序&&&&var&fs&=&require('fs');
&&&&var&nativeCSS&=&require('native-css'),
&&&&var&cssObject&=&nativeCSS.convert('./styles.css');
&&&&toStyleJs(cssObject,&'./styles.js');
&&&&buildWebReact();
&&&&&*&native-css获取到得是一个对象，需要将cssObject转化为js代码
&&&&function&toStyleJs(cssObject,&name)&{
&&&&&&&&console.log('build&styles.js&\n');
&&&&&&&&var&tab&=&'&&&&';
&&&&&&&&var&str&=&'';
&&&&&&&&str&+=&'/*&build&header&*/\n';
&&&&&&&&str&+=&'var&styles&=&{\n';
&&&&&&&&for(var&key&in&cssObject)&{
&&&&&&&&&&&&var&rules&=&cssObject[key];
&&&&&&&&&&&&str&+=&tab&+&key&+&':&{\n';
&&&&&&&&&&&&for(var&attr&in&rules)&{
&&&&&&&&&&&&&&&&var&rule&=&rules[attr];
&&&&&&&&&&&&&&&&str&+=&tab&+&tab&+&attr&+&':&'&+&format(rule)&+&',\n'
&&&&&&&&&&&&}
&&&&&&&&&&&&str&+=&tab&+&'},\n'&
&&&&&&&&str&+=&'};\n'
&&&&&&&&str&+=&'module.exports&=&\n'
&&&&&&&&fs.writeFile(name,&str)
&&&&&&&&function&format(rule)&{
&&&&&&&&&&&&if&(!isNaN(rule&-&0))&{
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}
&&&&&&&&&&&&return&'"'&+&rule&+&'"';
&&&&&*&构造web使用的react
&&&&function&buildWebReact()&{
&&&&&&&&console.log('build&web&bundle');
&&&&&&&&var&browserify&=&require('browserify');
&&&&&&&&var&b&=&browserify();
&&&&&&&&b.add('./index.web.js');
&&&&&&&&//&添加es6支持
&&&&&&&&b.transform('reactify',&{'es6':&true});
&&&&&&&&//&ignore掉react-native&
&&&&&&&&b.ignore('react-native')
&&&&&&&&var&wstream&=&fs.createWriteStream('./web/index.web.js');
&&&&&&&&b.bundle().pipe(wstream);
&&&&}也尝试一下由react-native 到react-web的兼容方案问题flexbox的写法在react-native上面我们会发现， 不用在父元素上声明display: 在web上必须要做这样的声明， 所以我们需要让设置了flex:*的元素的父元素display: 。flexbox在android上是由很多bug的，所以必须要解决兼容性问题webkit-box解决方案1. nested 的style写法&&&&styles&=&StyleSheet.create({
&&&&&&&&mod:&{
&&&&&&&&&&&&flexDirection:&'row',
&&&&&&&&&&&&item:&{
&&&&&&&&&&&&&&&&flex:&1
&&&&&&&&&&&&}
&&&&});这样的写法有些像less，我们可以知道元素的层级关系， 这样我可以遍历这个对象，查找子元素有设置flex的，父元素加上display:flexbox。2. 通过自定义元素通过标签的方式， 相当于给react-native或者react添加了一个网格系统，同时我们可以直接在Row上设置display:flex.3. 遍历查找完全同react-native原生的写法，直接在web中兼容，遍历所有有flex样式的节点，直接做兼容。&&&&componentDidMount:&function()&{
&&&&&&&&var&$node&=&this.getDOMNode();
&&&&&&&&var&$parent&=&$node.parentN
&&&&&&&&var&$docfrag&=&document.createDocumentFragment();
&&&&&&&&$docfrag.appendChild($node);
&&&&&&&&var&treeWalker&=&document.createTreeWalker($node,&NodeFilter.SHOW_ELEMENT,&{&
&&&&&&&&&&&&acceptNode:&function(node)&{&
&&&&&&&&&&&&&&&&return&NodeFilter.FILTER_ACCEPT;&
&&&&&&&&&&&&}&
&&&&&&&&},&false);
&&&&&&&&while(treeWalker.nextNode())&{
&&&&&&&&&&&&var&node&=&treeWalker.currentN
&&&&&&&&&&&&if&(node.style.flex)&{
&&&&&&&&&&&&&&&&flexChild(node);
&&&&&&&&&&&&&&&&flexParent(node.parentNode);
&&&&&&&&&&&&}
&&&&&&&&};
&&&&&&&&$parent.appendChild($docfrag);
&&&&function&flexChild(node)&{
&&&&&&&&if&(node.__flexchild__)&{
&&&&&&&&&&&&
&&&&&&&&node.__flexchild__&=&
&&&&&&&&var&flexGrow&=&node.style.flexG
&&&&&&&&addStyle(node,&`
&&&&&&&&&&&&-webkit-box-flex:&${flexGrow};
&&&&&&&&&&&&-webkit-flex:&${flexGrow};
&&&&&&&&&&&&-ms-flex:&${flexGrow};
&&&&&&&&&&&&flex:&${flexGrow};
&&&&&&&&`);
&&&&&&&&node.classList.add('mui-flex-cell');
&&&&function&flexParent(node)&{
&&&&&&&&if&(node.__flexparentd__)&{
&&&&&&&&&&&&
&&&&&&&&node.__flexparentd__&=&
&&&&&&&&node.classList.add('mui-flex');
&&&&.mui-flex&{
&&&&&&&&display:&-webkit-box!
&&&&&&&&display:&-webkit-flex!
&&&&&&&&display:&-ms-flexbox!
&&&&&&&&display:&flex!
&&&&&&&&-webkit-flex-wrap:&
&&&&&&&&-ms-flex-wrap:&
&&&&&&&&flex-wrap:&
&&&&&&&&-webkit-box-orient:&
&&&&&&&&-webkit-box-direction:&
&&&&&&&&-webkit-flex-direction:&
&&&&&&&&-ms-flex-direction:&
&&&&&&&&flex-direction:&
&&&&}&&&&.mui-flex-cell&{
&&&&&&&&-webkit-flex-basis:&0;
&&&&&&&&-ms-flex-preferred-size:&0;
&&&&&&&&flex-basis:&0;
&&&&&&&&max-width:&100%;
&&&&&&&&display:&
&&&&&&&&position:&
&&&&}总结这个demo很简单，实际应用中应该会有很多地方的坑， 比如：模块中依赖只有native才有的组件Native模块的事件处理和web大不相同现实环境中的模块更多，更复杂，如何做模块的管理对于write once, run anywhere 这个观点. 相信不同的人会有不同的看法，但无论如何，如果兼容成本不大，这样的兼容技术方案对业务开发是有极大意义的。ps0: 这里仅仅做可行性方案的分析，不代表我认同或不认同这种方案。ps1: 大家如果有更好的方案，求教，求讨论。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量4838点击量3004点击量2753点击量2107点击量2054点击量1789点击量1777点击量1026点击量743
&2016 Chukong Technologies,Inc.
京公网安备89