根据小码哥的教程整理。
所有的变量全部用{}
一、常用组建之View
Reactive Native中的组件view，相当于iOS中的UIView,Android中的android.view
在Reactive Native开发中，使用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函数中，我们返回了一个顶层的View，然后View中包含着另一个字层的View。
在顶层的View中style属性里面设置了宽带300，高度60，背景颜色为红色；
对应子层中的View的style属性中设置了背景色为黄色。
显示效果如下
屏幕快照 2016-08-06 17.25.44.png
view的常用属性↓
- 那么我们怎么能让他们显示在一行呢？
就用到了Flexbox↓
二、 FlexBox布局
FelxBox:能够伸缩或者很容易变化，以适应外界条件的变化
box：通用的矩形容器
FlexBox布局？：弹性盒模型，又叫Flexbox,意为“弹性布局”，旨在通过弹性的方式来，，巴拉巴拉吧拉，，，，，，
- FlexBox的常用属性：
➢flexDirection:'row|row-reverse|column| column-reverse'
该属性决定主轴的方向（即项目排列的方向，所以上边的
例子，因为他的主轴的方向是x轴正向，所以才会竖着排下来了）
row:主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
328E870B-7968-4385-8557-2AC77E2D7C65.png
代码就像下面这样↓，哈哈，为什么没有老师的那个效果呢😏，哈哈哈，因为老师设置的高都是一样的
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 ' 字体粗细权重("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) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了
'onPress' (fcuntion) 该方法当文本发生点击的时候调用该方法
'fontFamily' 字体名称
'fontStyle' 字体风格(normal,italic)
'textShadowOffset' 设置阴影效果{width: number, height: number}
'textShadowRadius' 阴影效果圆角
'textShadowColor' 阴影效果的颜色
'writingDirection' 文本方向("auto", 'ltr', 'rtl')