新建一個 SearchPage.js 文件，保存在 index.ios.js同一目錄。在這個文件中加入代碼：
~~~
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicatorIOS,
Image,
Component
} = React;
~~~
這里使用了一個解構賦值（destructuring assignment），可以將多個對象屬性一次性賦給多個變量。這樣，在后面的代碼中，我們就可以省略掉React前綴，比如用StyleSheet 來代替 React.StyleSheet。解構賦值對于數組操作來說尤其方便，請參考[well worth learning more about.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
然后定義如下Css樣式:
~~~
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: ‘center’,
color: ‘#656565′
},
container: {
padding: 30,
marginTop: 65,
alignItems: ‘center’
}
});
~~~
這里，再次使用了標準的 CSS 屬性。雖然用CSS設置樣式在可視化方面比起在IB中要差一些，但總比在viewDidLoad()方法中用代碼寫要好一些。
然后加入以下代碼：
~~~
class SearchPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location.
</Text>
</View>
);
}
}
~~~
在render方法中使用了大量的JSX語法來構造UI組件。通過這種方式，你可以非常容易地構造出如下組件：在一個Container View中包含了兩個label。
在源文件的最后加入這一句：
~~~
module.exports = SearchPage;
~~~
這一句將使 SearchPage 類可被其他js文件引用。
然后需要修改App的導航。
打開 index.ios.js 在文件頭部、現有的require 語句后加入 require 語句:
~~~
var SearchPage = require('./SearchPage');
~~~
在 PropertyFinderApp 類的 render 函數中，修改 initialRoute 為:
~~~
component: SearchPage
~~~
這里我們可以將HelloWorld類和它對應的樣式移除了，我們不再需要它。
回到模擬器，按下 Cmd+R 查看效果:
你新創建的組件SearchPage顯示在屏幕中。
