根據(jù)小碼哥的教程整理。
所有的變量全部用{}
一、常用組建之View
Reactive Native中的組件view，相當于iOS中的UIView,Android中的android.view
在Reactive Native開發(fā)中，使用StyleSheet來進行組件的布局。
class BView extends Component {
render() {
return (
<View style={styles.container}>
<Text>我是頂層view</Text>
<View style = {styles.innerStyle}>
<Text>我是子層view</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
//flex: 1, //占滿整個屏幕
//justifyContent:'center',
//alignItems: 'center',
backgroundColor:'red',
width :300, height : 60
},
innerStyle:{
backgroundColor:'yellow'
}
});
?在render函數(shù)中，我們返回了一個頂層的View，然后View中包含著另一個字層的View。
在頂層的View中style屬性里面設(shè)置了寬帶300，高度60，背景顏色為紅色；
對應(yīng)子層中的View的style屬性中設(shè)置了背景色為黃色。
顯示效果如下
屏幕快照 2016-08-06 17.25.44.png
view的常用屬性↓
- 那么我們怎么能讓他們顯示在一行呢？
就用到了Flexbox↓
二、 FlexBox布局
FelxBox:能夠伸縮或者很容易變化，以適應(yīng)外界條件的變化
box：通用的矩形容器
FlexBox布局？：彈性盒模型，又叫Flexbox,意為“彈性布局”，旨在通過彈性的方式來，，巴拉巴拉吧拉，，，，，，
- FlexBox的常用屬性：
?flexDirection:'row|row-reverse|column| column-reverse'
該屬性決定主軸的方向（即項目排列的方向，所以上邊的
例子，因為他的主軸的方向是x軸正向，所以才會豎著排下來了）
row:主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，起點在右端
column:主軸為垂直方向，起點在上沿
column-reverse:主軸為垂直方向，起點在下沿
328E870B-7968-4385-8557-2AC77E2D7C65.png
代碼就像下面這樣↓，哈哈，為什么沒有老師的那個效果呢??，哈哈哈，因為老師設(shè)置的高都是一樣的
class BView extends Component {
render() {
return (
<View style={styles.container}>
{/*<Text>我是頂層view</Text>*/}
<View style = {styles.innerStyle}>
<Text>我是子層view</Text>
</View>
<View style = {styles.inner2Style}>
<Text>我是子層2view</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
//flex: 1, //占滿整個屏幕
//justifyContent:'center',
//alignItems: 'center',
backgroundColor:'red',
width :300,
height : 80,
//改變主軸方向，默認是豎向
flexDirection:'row'
},
innerStyle:{
backgroundColor:'yellow',
width:150,
height:20
},
inner2Style:{
backgroundColor:'darkgray',
width:100,
height:20
}
});
效果圖如下↓
屏幕快照 2016-08-06 18.19.54.png
?justifyContent:flex-end | space-around|
justifyContent:'center'↓
屏幕快照 2016-08-07 20.48.59.png
?justifyContent:'space-between'↓
屏幕快照 2016-08-07 20.50.59.png
?justifyContent:'space-around'↓
屏幕快照 2016-08-07 20.52.09.png
三、常用組建之Text
class TextDemo extends Component {
render() {
return {
<View style={{marginTop:50}}>
<Text style={styles.textStyle} numberOfLines = {5}>
我是一段文字
</Text>
</View>
};
}
}
const styles = StyleSheet.create({
textStyle:{
backgroundColor:'red',
color:'yellow',
textAlign:'right',
width:300,
lineHeight:'right'
fontSize: 18
fontWeight:'bold'
letterSracing: 5
textDecorationLine: 'underline'
textDecorationStyle: 'double'
textDecorationColor: 'black'
}
});
注釋如下：
'color'字體顏色
'textAlign' 文本對其方式("auto", 'left', 'right', 'center', 'justify')
'lineHeight' 行高
'fontSize' 字體大小
'fontWeight ' 字體粗細權(quán)重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
'letterSpacing' 字符間距
'textDecorationLine' 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
'textDecorationStyle' 線的風格("solid", 'double', 'dotted', 'dashed')
'textDecorationColor' 線的顏色
'numberOfLines' (number) 進行設(shè)置Text顯示文本的行數(shù)，如果顯示的內(nèi)容超過了行數(shù)，默認其他多余的信息就不會顯示了
'onPress' (fcuntion) 該方法當文本發(fā)生點擊的時候調(diào)用該方法
'fontFamily' 字體名稱
'fontStyle' 字體風格(normal,italic)
'textShadowOffset' 設(shè)置陰影效果{width: number, height: number}
'textShadowRadius' 陰影效果圓角
'textShadowColor' 陰影效果的顏色
'writingDirection' 文本方向("auto", 'ltr', 'rtl')