ReactNavtive框架教程（3）

原文：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语句。