前面我們用React.createElement構建了一個簡單的UI ，React 會將之轉換為對應的本地對象。但對于復雜UI來說（比如那些組件嵌套的UI），代碼會變得非常難看。 確保App保持運行，回到文本編輯器，修改index.ios.js中的return語句為： ~~~ return <React.Text style={styles.text}>Hello World (Again)</React.Text>; ~~~ 這里使用了JSX語法，即JavaScript 語法擴展，它基本上是將JavaScript代碼混合了HTML風格。如果你是一個web開發人員，對此你應該不會陌生。 在本文中，JSX隨處可見。 保存 index.ios.js回到iPhone模擬器，按下快捷鍵 Cmd+R，你會看到App的顯示變成了 “Hello World (Again)”。 重新運行React Navtive App如同刷新Web頁面一樣簡單。 因為你實際上是在和JavaScript打交道，所以只需修改并保存index.ios.js，即可讓App內容得到更新，同時不中斷App的運行。 > 注意: > 如果你還有疑問，你可以用瀏覽器在看一下你的“Bundle”內容，它應該也發生了變化。 好了，“Hello World” 的演示就到此為止；接下來我們要編寫一個真正的React App了！ ## 實現導航 這個demo使用了標準的UIKit中的導航控制器來提供”棧式導航體驗“。接下來我們就來實現這個功能。 在 index.ios.js, 將 PropertyFinderApp 類修改為 HelloWorld: ~~~ class HelloWorld extends React.Component { ~~~ 我們仍然要顯示“Hello World”字樣，但不再將它作為App的根視圖。 然后為HelloWorld加入以下代碼： ~~~ class PropertyFinderApp extends React.Component { render() { return ( <React.NavigatorIOS style={styles.container} initialRoute={{ title: 'Property Finder', component: HelloWorld, }}/> ); } } ~~~ 這將創建一個導航控制器，并指定了它的外觀樣式和初始route（相對于HelloWorld視圖）。在web開發中，routing是一種技術，用于表示應用程序的導航方式，即哪個一頁面（或route）對應哪一個URL。 然后修改css樣式定義，在其中增加一個container樣式： ~~~ var styles = React.StyleSheet.create({ text: { color: 'black', backgroundColor: 'white', fontSize: 30, margin: 80 }, container: { flex: 1 } }); ~~~ flex: 1的意思稍后解釋。 回到模擬器，按 Cmd+R 查看效果:  這個導航控制器有一個根視圖，即圖中顯示的”Hello World“文本。非常好——我們的App已經具備了基本的導航功能。是時候顯示一些”真正的“UI了！