前面我们用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了！