ReactNavtive框架教程（2）

,

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>

这段代码增加了两个顶级的视图：一个文本输入框外加一个按钮，以及一个单独的按钮。它们所使用的样式呆会我们再介绍。