样式表：
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #EC403C;
}
cententWrap{
flex:1;
flex-direction:column;
}
bottom{
height: 40;
}
大致结构算是搭建完毕，开始完善头部展示（偷懒、不想切图，就用个title代替就好啦~~~）
页面结构：
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}>网易</Text>
</View>
<View style={styles.cententWrap}>
<Text>新闻主题</Text>
</View>
<View style={styles.bottom}>
<Text>
尾部导航
</Text>
</View>
</View>
样式表：
topTitle{
margin-top: 15;
margin-left: 20;
text-align: left;
font-size: 14;
color:#FFF;
}
头部内容完成之后，就完善内容区域的导航条，但是react-native并没有提供ul、li标签（也许以后有），这个是要View来代替ul，Text代替li，代码和数据如下：
页面结构：
var cententNav = ['头条', '热点', '娱乐', '体育', '财经'];
return (
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}>网易</Text>
</View>
<View style={styles.cententWrap}>
<View style={styles.cententNav}>
{
cententNav.map(function(el, index){
return <Text style={styles.cententNavText}>
<Text style={index == 0 ? styles.textR : ""}>{cententNav[index]}</Text>
</Text>
})
}
</View>
</View>
<View style={styles.bottom}>
<Text>
尾部导航
</Text>
</View>
</View>
);
