原文：http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript
注意：全部图片放在了百度相冊空间，假设你看不到图片，请复制图片URL，然后粘贴到地址栏中进行查看。
Hello World JSX
前面我们用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开发者，对此你应该不会陌生。
保存 index.ios.js回到iPhone模拟器。按下快捷键 Cmd+R。你会看到App的显示变成了 “HelloWorld (Again)”。
又一次执行React Navtive App如同刷新Web页面一样简单。
注意: 假设你还有疑问，你能够用浏览器在看一下你的“Bundle”内容，它应该也发生了变化。
使用导航
在 index.ios.js, 将 PropertyFinderApp 类改动为 HelloWorld:
class HelloWorld extends React.Component {
我们仍然要显示“Hello World”字样，但不再将它作为App的根视图。
然后增加下面代码：
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” 文本作为Navigation Controller的根视图显示。
创建搜索页面
新建一个 SearchPage.js 文件。保存在 index.ios.js同一文件夹。在这个文件里增加代码：
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicatorIOS,
Image,
Component
} = React;
这里使用了一个解构赋值（destructuringassignment），能够将多个对象属性一次性赋给多个变量。
这样，在后面的代码中，我们就能够省略掉React前缀，比方用StyleSheet 来取代 React.StyleSheet。解构赋值对于数组操作来说尤其方便。请參考wellworth learning more about.
然后定义例如以下Css样式:
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
}
});
标准的 CSS 属性。尽管用CSS比在IB设置UI样式的可视化要差。但总比在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>
);
}
}
一个container视图。包括两个label。
最后是这一句：
module.exports = SearchPage;
这一句将使 SearchPage 类可被其它js文件引用。
然后须要改动App的导航。
打开 index.ios.js 在文件头部增加 require 语句:
var SearchPage = require('./SearchPage');
在 PropertyFinderApp 类的 render 函数中。改动 initialRoute 为:
component: SearchPage
这里我们能够将HelloWorld类和它相应的样式移除了。我们不在须要它。
回到模拟器，按下 Cmd+R 查看效果:
弹性盒子模型
我们能够用主要的CSS属性处理边距、间距、色彩等问题。可是有时候使用CSS新增加弹性盒子模型会很实用。
ReactNative 使用了 css-layout 库，在这个库中实现了弹性盒子。而这样的模型不管对iOS还是Android来说都很好理解。
在这个App中，採用了默认的垂直流式布局，即容器中的子元素依照从上到下的顺序进行布局。比方：
这被称作主轴, 主轴可能是水平方向，也可能是垂直方向。每一个子元素的纵向位置由它们的边距（margin）、间距（padding）和高决定。容器的alignItems属性会被设置为居中（center），这决定了子元素在交叉轴上的位置。在本例里，将导致子元素水平居中对齐。
接下来我们增加一些文本输入框和按钮。
打开SearchPage.js 在第二个 Text 元素后增加:
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>
这段代码增加了两个顶级的视图：一个文本输入框外加一个按钮，以及一个单独的按钮。它们所使用的样式呆会我们再介绍。转载于:https://www.cnblogs.com/bhlsheji/p/5115728.html
相关资源：数据结构—成绩单生成器