React Native 三:样式

一、声明和使用样式

1.React Native里面的样式和使用如下面所示，StyleSheet.create这个构造函数不是必须的；

index.android.js文件
import React,{
    … …
} from 'react-native';
class AwesomeProject extends Component {
  render() {
    return (
      <View>
            //所有核心组件都可以接受style属性
           <Text style={styles.base}>Declare Style</Text>
            //接受数组形式的多个style
           <Text style={[styles.base,styles.background]}>Declare Style</Text>
            //根据某些条件选择性的添加样式，否定型取值如false，undefined和null则会被忽略
            <View style={[styles.base,true && styles.active]}/>
            //可以在render方法中创建样式，多个值冲突的时候，右边的元素优先级最高
            <View style={[styles.background,styles.base,{ width:80,height:80}]}/>
       </View>
    );
  }
}
//声明样式
var styles = StyleSheet.create({
  base: {
    width: 100,height: 38,},background: {
    backgroundColor: '#cccccc',active: {
    borderWidth: 2,borderColor: '#00ff00',});
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

二、FlexBox（弹性盒子模型）

1.在布局上，React Native还实现了弹性盒子模型FlexBox。flexBox布局由伸缩容器和伸缩项目组成，任何一个元素都可以指定为flexBox布局；

其中设为display:flex或display:inline-flex的元素称为伸缩容器；

伸缩容器的子元素称为伸缩项目；

2.和传统的布局不一样，它按照伸缩流的方向布局；

3.默认情况下，伸缩容器由两根轴组成，即主轴（main axis）和交叉轴（cross axis）；

其中主轴的开始位置叫main start，结束位置叫main end；

交叉轴的开始位置叫cross start，结束位置叫cross end；

伸缩项目在主轴上占据的空间叫main size，在交叉轴上占据的空间叫cross size；

根据设置的情况，主轴可以是水平轴，也可以是垂直轴；

不管那个轴作为主轴，默认情况下伸缩项目总是沿着主轴，从主轴开始位置到主轴结束位置进行排列；

4.伸缩容器属性

下面我们一实际的Demo来演示下相关属性的作用；

 index.android.js文件：
     import React,{
         … …   
     } from 'react-native';
     class AwesomeProject extends Component {
         render() {
              return (
                   <View style={styles.flexcontain}>
                       <View style={styles.flexitem}>
                         <Text>1</Text>
                       </View>
                       <View style={styles.flexitem}>
                         <Text>2</Text>
                       </View>
                       <View style={styles.flexitem}>
                         <Text>3</Text>
                       </View>
                       <View style={styles.flexitem}>
                         <Text>4</Text>
                       </View>
                       <View style={[styles.flexitem,styles.item5]}>
                         <Text>5</Text>
                       </View>
                </View>
              );
            }
     }
     var styles = StyleSheet.create({
          flexcontain: {
               width:300,height:300,borderWidth:1,borderColor:'blue',flexDirection:'row',top:100,left:100,flexitem: {
              width:50,height:50,borderColor:'white',backgroundColor:'gray',justifyContent:'center',alignItems:'center',item5: {
         alignSelf:'stretch',});
     AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

flexDirection：指定主轴的方向；

row：水平方向；

column：竖直方向；

flexWrap：主轴线方向空间不足的情况下，是否换行以及应该如何换行；

wrap：空间不足的情况下允许换行，若主轴方向为水平方向，则从上到下；若主轴方向是为竖直方向，从左到右；

nowrap：即使空间不足，伸缩容器也不允许换行；

justifyContent：伸缩项目沿主轴方向的对其方式；

flex-start：伸缩项目沿主轴线的对其方式；

flex-end：伸缩项目沿着主轴线的结束位置靠齐；

center：伸缩项目向主轴中间位置靠齐；

space-between：伸缩项目会平均地分配在主轴线里，第一伸缩项目在主轴线的开始位置，最后一个项目在主轴线的终点位置；

space-around：伸缩项目会平均分布在主轴线里，两端保持一半的空间；

alignItems：伸缩项目在伸缩容器的交叉轴上的对其方式；

flex-start：伸缩项目向交叉轴的起始的位置对齐；

flex-end：伸缩项目向交叉轴的结束位置对齐；

center：伸缩项目向交叉轴的中间位置对齐；

alignSelf：设置单独伸缩项目在交叉轴上的对齐方式；

auto：伸缩项目按照自身设置的宽高显示；

flex-start：伸缩项目向交叉轴开始位置靠齐；

flex-end：伸缩项目向交叉轴的结束位置靠齐；

center：伸缩项目向交叉轴的中心位置靠齐；

borderBottomWidth/borderRightWidth/borderTopWidth/borderTopWidth：底部边框的宽度；

margin/marginTop/marginBottom/marginLeft/marginRight：外边距；

padding/paddingTop/paddingBottom/paddingLeft/paddingRight：内边距；

left/top/right/bottom：左上角坐标；

width/height：宽高；

三、将样式作为参数传递

后期期待....

React Native 三:样式

猜你在找的React相关文章