說(shuō)在前面：
接觸React Native有一段時(shí)間了到逊，可能我比較笨斯够，網(wǎng)上的教程看了，demo也寫(xiě)了江兢，還有感覺(jué)沒(méi)入門朽褪。于是買了下面這本書(shū)來(lái)正經(jīng)的學(xué)習(xí)躺坟，用簡(jiǎn)書(shū)來(lái)記錄我學(xué)習(xí)的步伐，督促自己罩缴，加油吧！
關(guān)于React Native的基礎(chǔ)配置就自己看書(shū)层扶，或者去看網(wǎng)上的教程靴庆，應(yīng)該問(wèn)題不大（連我這樣的小白都能看懂-_-!!）直接上干貨，書(shū)上第二章先寫(xiě)的攜程的主界面下的九宮格怒医，如下
咱們小白就一步一步來(lái)咯炉抒。 現(xiàn)在我們先來(lái)實(shí)現(xiàn)如下圖所示的界面
/*
1.加載View組件
*/
var React = require('react-native');
var {
AppRegistry, //負(fù)責(zé)入口組件
StyleSheet, //負(fù)責(zé)創(chuàng)建樣式表
View
} = React;
/*
2.創(chuàng)建組件 使用React.createClass創(chuàng)建一個(gè)組件，即app稚叹，它將作為應(yīng)用程序的入口組件焰薄。
在React.createClass中需要一個(gè)render方法，負(fù)責(zé)渲染視圖（同時(shí)render方法要返回一個(gè)JSX對(duì)象扒袖，可以為null塞茅。
并且該對(duì)象必須有且只有一個(gè)容器對(duì)象包裹）意思就是說(shuō)return回來(lái)的只有一個(gè)對(duì)象，比如下面的三個(gè)view被外面一
個(gè)view包裹
*/
var app = React.createClass({
render: function(){
return (
/*這里做flexbox布局：需要將3個(gè)view組件水平布局并且同事平分屏幕寬度
style 這個(gè)屬性是所有組件都支持的季率，屬性值為{JavaScript JSON對(duì)象}的形式
style={styles.container}這里使用的是外部樣式野瘦，還有內(nèi)聯(lián)樣式，以及同時(shí)多個(gè)樣式飒泻，自己百度吧鞭光，沒(méi)什么東西
*/
<View style={styles.container}>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
</View>
);
}
});
/*
3.創(chuàng)建樣式表
container
flex:1 表示將最外層的view組件平鋪占滿整個(gè)屏幕（為啥？等下下面再說(shuō)）
borderColor泞遗、borderWidth不用解釋
flexDirection:'row' flexDirection默認(rèn)的布局是縱向‘column’,所以'row'就是水平布局的意思
item
flex:1 這里也是1惰许，有的同學(xué)可能比較懵，flex屬性表示權(quán)重,這里三個(gè)子view的flex都是1史辙，那么就意味著它們?nèi)齻€(gè)的權(quán)重一樣（也就是說(shuō)三個(gè)是一個(gè)等級(jí)的）汹买，那么大家就平分外面的View咯佩伤，怎么平分呢？看上面的flexDirection:'row' 水平分晦毙，這里還限制了height為80生巡，所以就有了三個(gè)等分的高為80
的小方塊了
*/
var styles = StyleSheet.create({
container: {
flex:1,
borderWidth:1,
borderColor:'red',
flexDirection:'row',
backgroundColor:'gray'
},
item: {
flex:1,
height:80,
borderWidth:1,
borderColor:'blue',
backgroundColor:'red'
}
});
/*
4.注冊(cè)入口 第一個(gè)InformationServicesRN為項(xiàng)目名稱，第二個(gè)參數(shù)為入口組件對(duì)象 即第二步創(chuàng)建的app對(duì)象
*/
AppRegistry.registerComponent('InformationServicesRN', () => app);
接著我們來(lái)實(shí)現(xiàn)如下圖所示的
/*上下兩欄的布局
這里要加載Text組件见妒，和加載View組件一樣
然后開(kāi)始布局障斋，在上面的return函數(shù)內(nèi)添加如下代碼
*/
<View style={styles.container}>
<View style={[styles.item, styles.center]}>
<Text>酒店</Text>
</View>
<View style={styles.item}>
<View style={styles.center}>
<Text>海外酒店</Text>
</View>
<View style={styles.center}>
<Text>特惠酒店</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.center}>
<Text>團(tuán)購(gòu)</Text>
</View>
<View style={styles.center}>
<Text>客棧.公寓</Text>
</View>
</View>
</View>
樣式如下
center: {
justifyContent:'center', //垂直居中 實(shí)際上是按照上面的flexDirection方向居中
alignItems:'center', //水平居中
flex:1
}
接著我們來(lái)處理UI，（背景顏色徐鹤、線條的分割、字體的設(shè)置邀层、圓角處理等）
首先在 第一步中加入PixelRatio
var {
AppRegistry, //負(fù)責(zé)入口組件
StyleSheet, //負(fù)責(zé)創(chuàng)建樣式表
View,
Text,
PixelRatio //PixelRatio的get方法可以獲取高清設(shè)備的像素比 如：1/PixelRatio.get()為最小線寬
} = React;
布局函數(shù)中
<View style={styles.container}>
<View style={[styles.item, styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item, styles.lineLeftRight]}>
<View style={[styles.center, styles.lineCenter]}>
<Text style={styles.font}>海外酒店</Text>
</View>
<View style={styles.center}>
<Text style={styles.font}>特惠酒店</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.center, styles.lineCenter]}>
<Text style={styles.font}>團(tuán)購(gòu)</Text>
</View>
<View style={styles.center}>
<Text style={styles.font}>客棧.公寓</Text>
</View>
</View>
</View>
樣式函數(shù)
/*
3.創(chuàng)建樣式表
container
flex:1 表示將最外層的view組件平鋪占滿整個(gè)屏幕（為啥返敬？等下下面再說(shuō)）
borderColor、borderWidth不用解釋
flexDirection:'row' flexDirection默認(rèn)的布局是縱向‘column’,所以'row'就是水平布局的意思
marginTop:25 距頂部25 marginLeft:5 寥院、marginRight:5 height:84 不用解釋
borderRadius:5 設(shè)置圓角
padding:2 設(shè)置內(nèi)邊距 四邊都是2
item
flex:1 這里也是1劲赠，有的同學(xué)可能比較懵，flex屬性表示權(quán)重,這里三個(gè)子view的flex都是1秸谢，那么就意味著
它們?nèi)齻€(gè)的權(quán)重一樣（也就是說(shuō)三個(gè)是一個(gè)等級(jí)的）凛澎，那么大家就平分外面的View咯，怎么平分呢估蹄？看
上面的flexDirection:'row' 水平分塑煎，這里還限制了height為80，所以就有了三個(gè)等分的高為80
的小方塊了
*/
var styles = StyleSheet.create({
container: {
// flex:1,
// borderWidth:1,
// borderColor:'red',
flexDirection:'row',
marginTop:25,
marginLeft:5,
marginRight:5,
height:84,
borderRadius:5,
backgroundColor:'#FF0067',
padding:2
},
item: {
flex:1,
height:80,
// borderWidth:1,
// borderColor:'blue',
// backgroundColor:'red'
},
center: {
justifyContent:'center',
alignItems:'center',
flex:1
},
font: {
color:'#fff',
fontSize:16,
fontWeight:'bold'
},
lineLeftRight: {
borderLeftWidth:1/PixelRatio.get(),
borderRightWidth:1/PixelRatio.get(),
borderColor:'#fff'
},
lineCenter: {
borderBottomWidth:1/PixelRatio.get(),
borderColor:'#fff'
}
});
最后實(shí)現(xiàn)的效果：
