标签:
原文: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语句。
标签:
原文地址:http://blog.csdn.net/kmyhy/article/details/46849155