RN基本控件以及布局样式
基本控件以及布局样式
View
View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，
并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
</View>
Text
显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理
<Text style={styles.titleText} onPress={this.onPressTitle}> {this.state.titleText} </Text>
Image:
不同类型图片的React组件，包括网络图片、本地资源
<Image style={styles.icon} source={require('./icon.png')} /> 同级
<Image style={styles.icon} source={require('./img/icon.png')} /> 下级
<Image style={styles.icon} source={require('./../icon.png')} /> 上级
<Image style={styles.icon} source={require('./../img/icon.png')} /> 同级文件夹
<Image style={styles.logo} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} />
TextInput
输入文本的基础组件。
onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。
onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})} />
<Text
style={{padding: 10, fontSize: 42}}>
{this.state.text}
</Text>
Button：
显示一个简单的按钮
是一个简单的跨平台的按钮组件。
<Button
onPress={() => {
Alert.alert("你点击了按钮！");
}}
title="点我！"
color="#841584"
/>
Touchable系列组件:
TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
在Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。
<TouchableHighlight
onPress={this._onPressButton} //点击响应
onLongPress={this._onLongPressButton} //长按响应
underlayColor="white"
>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
//--------------------------------------------------------------------------------------------------
样式:
style的属性;驼峰命名法，例如将background-color改为backgroundColor
还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,间接实现样式的继承
使用StyleSheet.create来集中定义组件的样式
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
const styles = StyleSheet.create({
bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, },
red: { color: 'red', },
});
关于样式
（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；
<View style={{fontSize:40, width:80,}}> </View>
（2）调用样式表:{样式类.属性}
<View style={styles.container}></View>
（3）样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
（4）多个样式表:{[样式类1， 样式类2]}
<View style={[styles.container, styles.color]}>
弹性布局Flexbox
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴;默认值是竖直轴(column)方向
在React Native中，有4个容器属性，2个项目属性，分别是：
容器属性：flexDirection flexWrap justifyContent alignItems
项目属性：flex alignSelf
flexDirection容器属性: `row | row-reverse | column | column-reverse`
该属性决定主轴的方向（即项目的排列方向）。
row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flexWrap容器属性: `nowrap | wrap | wrap-reverse`
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap(默认值)：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方。（和wrap相反）
justifyContent容器属性:`flex-start | flex-end | center | space-between | space-around`
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：两端对齐，项目之间的间隔都相等。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
alignItems容器属性:`flex-start | flex-end | center | baseline | stretch`
定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐 。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex项目属性:
“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写，
其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。
自身相对于父容器的权重占比
alignSelf项目属性:
“auto | flex-start | flex-end | center | baseline | stretch”
align-self属性交叉轴允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
