iOS开发者对于React Native的看法(CLM)
iOS开发者对于React Native的看法(CLM)
万能的匹诺曹 发表于1年前
iOS开发者对于React Native的看法(CLM)
  • 发表于 1年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

>当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道<

 

React 范例

在React中,所有UI的组件都被放置在render()方法中,并且被state状态控制。你的render()方法定义了UI在各种状态是如 何展现的。当调用setState()的时候,React会找到需要改变的部分并替你修改。想象一个简单的视图,拥有一个“Hello World”标签和按钮。每点击一下按钮,标签会在“Hello World”和“Goodbye World”之间切换。在Objective-C中,我在按钮的句柄中需要一些难堪的if声明,就像下面一样。 

  1. if([label.text isEqual:@”HelloWorld”]){
  2. label.text =@”GoodbyeWorld”;
  3. }else{
  4. label.text =@”HelloWorld”;
  5. }

这样很有用,但是这种UI代码和我第一次创建这个标签的地方(可能在代码中,也可能在界面构建器里)完全脱节。在React中,我们会在state状态中定义一个buttonClicked的bool变量,在render()函数中,标签看起来会是这样的:

  1. <Text>
  2. {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}</Text>

并且我们的按钮句柄也会非常简单

  1. this.setState({buttonClicked:!this.state.buttonClicked});

所有和可视化相关的代码都在同一地方,并且由状态控制一切。这使得理解和修复这段代码变的非常容易。

 

Flex box(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

这就是我一开始非常痛恨的UI布局工具,现在变成了RN中我最喜欢的事物之一。我承认一开始非常难以掌握,但一旦你开始使用, 它把 为多种不同尺寸屏幕构建UI这件事 变的机器快速和简单。我曾经对Xcode中的可视化界面编辑器十分热衷,相比于Flexbox,它的自动布局还是国语复杂。Flexbox使用的CSS式 样式使得样式重用变的和复制粘贴一样简单。其中最棒的事莫过于允许你在一瞬间将样式值改变到完美。

 

Live/Hot Reload(http://www.tuicool.com/articles/myYzmqB

 

没错,想看看按钮右移5像素的样子就和command+s一样简单。React Native能够被设置为在iPhone模拟器中自动重绘当前画面而不重建Xcode工程。这非常厉害因为你不仅可以通过避免重新编译儿节省时间,你还能 够调整一个深度嵌套在应用中的界面,调整UI而不用回到最初的界面。

共有 人打赏支持
粉丝 4
博文 20
码字总数 16971
×
万能的匹诺曹
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: