原文：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选择器后必须以一个逗号结尾。
这些样式被文本输入框和button所使用。
回到模拟器，按下
Cmd+R 。你将看到例如以下效果：
Gobutton和其紧随的文本框在同一行，因此我们将它们用一个容器装在一起，同一时候容器的flexDirection: 样式属性设置为'row' 。我们没有显式指定文本框和button的宽度，而是分别指定它们的flex样式属性为4和1。也就是说，它们的宽度在整个宽度（屏幕宽度）中所占的份额分别为4和1。
并且。视图中的两个button都不是真正的button。对于UIKit，button只是是能够点击的标签而已，因此React Native开发团队能够用JavaScript以一种简单的方式构建button：TouchableHighlight是一种React Native组件，当它被点击时，它的前景会变得透明，从而显示其隐藏在底部的背景色。
最后我们还要在视图中加入一张图片。这些图片能够在此处下载。
在 Xcode 打开 Images.xcassets 文件，点击加号button，加入一个新的image set。然后将须要用到的图片拖到image set右边窗体相应的位置。
要让这些图片显示，必须停止App并又一次启动。
在locationbutton相应的 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 keyword的含义事实上和大部分语言都不相同，它就好比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语句。