React Native分享记录

clipboard.png
今天我给大家分享React Native

clipboard.png
先给大家看个好东西

这个ios app就是用react native写的,没有用到一句OC,也没有用到webview

clipboard.png

所以今天的主题是使用js写原生应用

React Native的主旨是Learn once, write anywhere
React认为各个平台有其各自的特点和特长,如果使用一套代码,一个界面可能不能发挥各自平台的优势,所以我们需要学习一次如何使用react,然后可以在各个平台去编写各自的应用。

现在让我们来看看他是用了什么架构

clipboard.png

可以看到我们在写代码的时候写的是react的js和jsx,然后通过Virtual DOM将代码翻译成各个平台的代码。

clipboard.png

对前端来说最熟悉不过DOM了,而在React Native中我们应该能够非常容易理解他的这个View的概念。

clipboard.png

我们最常用的div对应native里的View,图片image对应的还是Image,经常用来包裹文字的span在native中是Text,经常用来写列表的ul和ol在native中是ListView。

clipboard.png

对前端来说还有个非常熟悉的点是css,native中有一套阉割版的css,叫css-layout

来看个对比

clipboard.png

左边是native的css-layout,右边是普通的css,似乎并不是特别难理解,是吧?
不过layout里没有block inline-block这些了,布局就统一采用了flexbox, layout支持绝大部分常用css。

来举个例子

clipboard.png

这是一个非常简单的布局,左右放置,然后右边两行字

clipboard.png

用native大概只要这么几行代码就实现了,是不是非常简洁和易读懂

来看看oc如果不拖界面,写类似界面需要多少

clipboard.png

clipboard.png

可能会有困惑,前端在写页面的时候经常需要用到多个class并存的情况,layout其实也可以实现。

clipboard.png

react几乎没用webview是怎么做到的? 他用一个叫JavascriptCore的桥把js通向oc,有点类似那些html5游戏引擎使用的js binding的东西。

clipboard.png

来说说现在的react native让人蛋疼的地方
比如需要原生暴露接口,不过之前在写react native的时候觉得需要原生暴露接口的地方,其实并不需要,后来在github上看到老外有些已经写出来了,非常牛逼。
还有react的语法,虽然简单,但可能对一些人来说不太能理解吧,不过个人感觉,他比angular什么的好理解多了,非常容易入门。

clipboard.png

今天我就讲这些啦,谢谢大家~

(另外,一开始举得那个例子已经放在github上了 https://github.com/fakefish/sf-react-native 冷淡点赞中QAQ


Fakefish
我说的都是错的,除非你证明我是对的。
4.3k 声望
241 粉丝
0 条评论
推荐阅读
浅谈函数式编程和函数响应式编程
到底什么是函数式,他和命令式编程和面向对象有什么区别。(知乎上已经有很多讨论了,感兴趣的话,我在结尾的地方贴了一些链接。)总的来说,在函数式中,函数是一等公民,函数能作为变量的值,函数可以是另一个...

Fakefish17阅读 26.9k评论 15

ReactNative0.71正式版发布,Ts作为首要开发语言
时隔近4个月的时间,ReactNative带来了0.71版本的更新,这速度对比隔壁Flutter不得不说是真的有的慢。这个版本的更新的内容还是比较重磅和突破性的,主要体现在如下几点:编程语法默认改为TypeScript使用Flexbox ...

似水流年2阅读 556

最新版Android原生集成RN
现在不少应用都是采用了混合开发模式,不论是原生加RN,或是原生加Flutter,或是原生加H5。原生实现主业务线,其他部分可以借助跨平台方案开发,提高开发效率,或者实现热更新,调高业务迭代效率。

似水流年阅读 1.4k

React Native工程Monorepo改造实践
那在开发过程中存在的问题就是每个收银台的核心逻辑如商品展示、支付方式展示、下单购买等逻辑都大致相同,而每次有修改或者新增需求的时候都需要开发多次,重复代码较多效率低下。

云音乐技术团队阅读 629

封面图
React Native 0.71正式版发布,Ts成为默认开发语言
2023年1月14日,React Native官方发布了0.71版本,此版本带来了很多重磅和突破性的更新,同时,感谢70多位贡献者带来的了1000多次提交。下面是0.71版本带来的主要更新内容:

xiangzhihong阅读 490

开源:ReactNative设置应用角标库
项目开发需要RN项目可以设置应用角标,搜索相关资料后发现目前没有第三方库直接支持,所以想到自己通过桥接双端原生进行实现,本着不重复造轮子的思想,将库进行开源。

似水流年阅读 481

ReactNative支付密码输入框
项目中需求如果涉及钱包,支付等功能,可以大概率会用到输入密码组件,也算是个常见组件吧。之前写过一个纯js的开源组件,使用的类的形式,也比较老了,可直接添加npm库到项目中进行使用。最近项目需要,又重新写...

似水流年阅读 420

4.3k 声望
241 粉丝
宣传栏