Open 6174 opened 9 years ago
虽然都是React一家子,但是,个人认为这俩家庭属于远亲…… 想要融合应该是FB去思考的问题,等将来Android再整进来就更麻烦了…… 毕竟这东西原理比Cordova之类是完全不一样的
我用native-css 在iOS模拟器里运行 一直提示 module ‘fs’ 无法找到 是什么情况。。。。
我用native-css 在iOS模拟器里运行 一直提示 module ‘fs’ 无法找到 是什么情况。。。。
能帮我看下嘛 是什么原因
@punkwang native-css 可以当一个预编译工具,不能动态的在react-native中引用
可以实现一套IOS,Android,Hybrid (Web) 共通的UI层和接口层。普通的开发者在Android上可以先使用Hybrid App,就像ionic或者reapp一样。等10月份Android版出来,实现接口之后就可以直接切过去,做到神不知鬼不觉 (_^_^) 嘻嘻……
:+1:
@punkwang 缺少module,估计是你npm库没下全了,运行
npm install -S fs
感觉新一轮“重复造轮子”大赛要开始了,不过这是好事。
如果开了chrome的调试工具,
var isNative = !window.location;
这个判断就不准了~
@okoala 还真没试过这样的场景,多些指正,或者可以尝试通过 React = require('react-native') ,判断React是否为空, 因为在浏览器里边打包的时候react-native是被ignore掉的。
@okoala 你好, 业务逻辑都在js里面了, 直接解压岂不是直接就可以看了, 有没有好的规避方案.
mark
mark
markdown
var isNative = !window.location;
巧妙:)
在android系统中,“build打包程序” 这部分代码写到哪个文件里
关于
对于react-native在实际中的应用, facebook官方的说法是react-native是为多平台提供共同的开发方式,而不是说一份代码,多处使用。 然后一份代码能够多处使用还是很有意义的,我所了解到的已经在尝试做这件事情的:
现阶段大家都是在摸索中,且react-native 还不够成熟,为此我也想通过一个实际的例子提前探究一下共享代码的可行性。
下面是我以SampleApp做的一个简单demo, 先奉献上截图:
react-native基本上是View套上Text这样来布局,为了做web和native的兼容,我们得提供继承版本的View ,针对不同的平台返回不同做兼容,我们将提供:
样式
我们知道react-native的样式是css很小的一个子集,大概支持50种属性,为了做到web和native使用同样地样式,那么我的想法是:
这样做的另外一个原因是,因为css是全集,react-native是子集,全集到子集可以通过删减来处理,但是如果想通过子集到全集就会很麻烦(react-style就是通过react-native来生成css)。 且这样做还有很多好处,例如我们可以支持react-native里边不支持的css写法,例如
padding: a b c d;
这种写法很容易得到兼容。首先大概整理一下我们需要解决的问题:
问题一 : 如何区分web和native
react-native 里边会有window变量吗?我试了一下,是有的,那window变量里边不可能有location,document之类的吧, 借着这种想法,可用如下方法来区分native和web
问题二:如何对应不同平台打包
对于react-native,是通过packager来打包的,具体的实现和逻辑可以随时查看packager的readme文档。 那我们怎么将适用于native的代码打包成web的代码,首先想到的是
browserify
,webpack
。 都是遵循commonJs规范,个人更喜欢前者, 用它来应该足以满足需求。问题三: css如何编译为js
前面提到了
native-css
, 可以用它来帮助我们完成打包。问题四:代码结构应该是怎样的
web和native的代码都写在同一个地方,如何做区分呢? 这个问题当然最好就是不做区分,或者就像女生的衣服,期望是越少越好,但永远不可能木有(猥琐了:-】)。
我设想中的一个最简模型的目录结构,web和ios有不同的入口,web和ios有单独的目录, 组件共享, 如下:
好像很复杂的样子, 其实相对于原本的SampleApp,只是多了
index.web.js
,web目录
,shared
三者。 然后style通过style.css来描述。具体实现
我们已经整理了具体的实现思路,下面是我就会直接吐出我的实现代码, 重点的地方都会在源码里边有注释
先看应用代码:
ios入口:index.ios.js
web入口:index.web.js
样例组件:compo.js
组件样式: style.css
index.html
Share部分的处理
shared.js
build打包程序
也尝试一下由react-native 到react-web的兼容方案
问题
display: flex;
在web上必须要做这样的声明, 所以我们需要让设置了flex:*
的元素的父元素display: flex;
。webkit-box
解决方案
1. nested 的style写法
这样的写法有些像less,我们可以知道元素的层级关系, 这样我可以遍历这个对象,查找子元素有设置flex的,父元素加上
display:flexbox
。2. 通过自定义元素
通过标签的方式, 相当于给react-native或者react添加了一个网格系统,同时我们可以直接在Row上设置
display:flex
.3. 遍历查找
完全同react-native原生的写法,直接在web中兼容,遍历所有有flex样式的节点,直接做兼容。
总结
这个demo很简单,实际应用中应该会有很多地方的坑, 比如:
对于
write once, run anywhere
这个观点. 相信不同的人会有不同的看法,但无论如何,如果兼容成本不大,这样的兼容技术方案对业务开发是有极大意义的。ps0: 这里仅仅做可行性方案的分析,不代表我认同或不认同这种方案。 ps1: 大家如果有更好的方案,求教,求讨论。