码迷,mamicode.com
首页 > 其他好文 > 详细

ReactNavtive框架教程(3)

时间:2015-07-12 12:49:25      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看。

接着,在styles中增加如下样式:

flowRight: {

  flexDirection: ‘row‘,

  alignItems: ‘center‘,

  alignSelf: ‘stretch‘

},

buttonText: {

  fontSize: 18,

  color: ‘white‘,

  alignSelf: ‘center‘

},

button: {

  height: 36,

  flex: 1,

  flexDirection: ‘row‘,

  backgroundColor: ‘#48BBEC‘,

  borderColor: ‘#48BBEC‘,

  borderWidth: 1,

  borderRadius: 8,

  marginBottom: 10,

  alignSelf: ‘stretch‘,

  justifyContent: ‘center‘

},

searchInput: {

  height: 36,

  padding: 4,

  marginRight: 5,

  flex: 4,

  fontSize: 18,

  borderWidth: 1,

  borderColor: ‘#48BBEC‘,

  borderRadius: 8,

  color: ‘#48BBEC‘

}

不同样式属性间以逗号分隔,这样你在container选择器后必须以一个逗号结尾。

这些样式被文本输入框和按钮所使用。回到模拟器,按下

 Cmd+R ,你将看到如下效果:

技术分享

Go按钮和其紧随的文本框在同一行,因此我们将它们用一个容器装在一起,同时容器的flexDirection: 样式属性设置为‘row‘ 。我们没有显式指定文本框和按钮的宽度,而是分别指定它们的flex样式属性为4和1。也就是说,它们的宽度在整个宽度(屏幕宽度)中所占的份额分别为4和1。

而且,视图中的两个按钮都不是真正的按钮。对于UIKit,按钮不过是可以点击的标签而已,因此React Native开发团队能够用JavaScript以一种简单的方式构建按钮:TouchableHighlight是一种React Native组件,当它被点击时,它的前景会变得透明,从而显示其隐藏在底部的背景色。

最后我们还要在视图中添加一张图片。这些图片可以在此处下载

在 Xcode 打开 Images.xcassets 文件,点击加号按钮,添加一个新的image set。然后将需要用到的图片拖到image set右边窗口对应的位置。

技术分享

要让这些图片显示,必须停止App并重新启动。

在location按钮对应的 TouchableHighlight 组件下加入:

<Image source={require(‘image!house‘)} style={styles.image}/>

然后,为图片添加适当的样式定义:

image: {

  width: 217,

  height: 138

}

由于我们将图片添加到了Images.xcasset资源包中,我们需要用require(‘image!house‘)语句获得图片在App包中的正确路径。在Xcode中,打开Images.xcassets ,你可以找到名为house的image set。

回到模拟器,按下Cmd+R 查看运行效果:

技术分享

注意: 如果图片没有显示,却看到一个““image!house” cannot be found”的提示,则可以重启packager(在终端中输入npm start命令)。

组件的状态

每个React组件都有一个state对象,它是一个键值存储对象。在组件被渲染之前,我们可以设置组件的state对象。

打开SearchPage.js,在 SearchPage 类的 render()方法前,加入以下代码:

constructor(props) {

  super(props);

  this.state = {

    searchString: ‘london‘

  };

}

现在组件就有一个state对象了,同时state中存放了一个 searchString:london的键值对象。

然后在render方法中,修改TextInput元素为:

<TextInput

  style={styles.searchInput}

  value={this.state.searchString}

  placeholder=‘Search via name or postcode‘/>

这将改变 TextInput 的value 属性,即在TextInput中显示一个london的文本。

如果用户修改文本框中文本,则又怎么处理?

首先创建一个事件处理方法。在 SearchPage 类中增加一个方法:

onSearchTextChanged(event) {

  console.log(‘onSearchTextChanged‘);

  this.setState({ searchString: event.nativeEvent.text });

  console.log(this.state.searchString);

}

首先从事件参数event中获得text属性,然后将它保存到组件的state中,并用控制台输出一些感兴趣的内容。

然后在TextInput的onChange事件属性中绑定这个方法:

<TextInput

  style={styles.searchInput}

  value={this.state.searchString}

  onChange={this.onSearchTextChanged.bind(this)}

  placeholder=‘Search via name or postcode‘/>

一旦用户改变了文本框中的文本,这个函数立即就会被调用。

注意:  bind(this) 的使用有点特殊。JavaScript 中 this 关键字的含义其实和大部分语言都不相同,它就好比Swift语言中的self。bind方法的调用使得onSearchTextChanged 方法中能够引用到this,并通过this引用到组件实例。更多内容请参考 MDN pageon this

然后,我们在render方法顶部、return语句之前加一条Log语句:

console.log(‘SearchPage.render‘);

通过这些log语句,你应该能明白大致发生了什么事情!

返回模拟器,按下Cmd+R,我们将看到文本框中一开始就有了一个london的字样,当你编辑这段文本后,控制台中的内容将显示:

技术分享

log语句似乎有点不对劲:

1.    组件初始化后调用 render() 方法

2.    当文本被改变, onSearchTextChanged() 被调用

3.    我们在代码中改变了组件的state 属性,因此render()方法会被调用

4.    onSearchTextChanged() 打印新的search string.

当React 组件的状态被改变时,都会导致整个UI被重新渲染——所有组件的render方法都会被调用。这样做的目的,是位了将渲染逻辑和组件状态的变化完全进行分离。

在其他所有的UI框架中,要么程序员在状态改变时自己手动刷新UI,要么使用一种绑定机制在程序状态和UI之间进行联系。就像我另一篇文章 MVVMpattern with ReactiveCocoa所讲。

而在React中,我们不再操心状态的改变会导致那一部分UI需要刷新,因为当状态改变所有的UI都会刷新。

当然,你也许会担心性能问题。

难道每次状态改变时,整个UI都会被舍弃然后重新创建吗?

这就是React真正智能的地方。每当UI要进行渲染时,它会遍历整个视图树并计算render方法,对比与当前UIKit视图是否一致,并将需要改变的地方列出一张列表,然后在此基础上刷新视图。也就是说,只有真正发生变化的东西才会被重新渲染。

ReactJS将一些新奇的概念应用到了iOS App中,比如虚拟DOM和一致性。

删除上面添加的Log语句。


ReactNavtive框架教程(3)

标签:

原文地址:http://blog.csdn.net/kmyhy/article/details/46849155

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!