React Native 三:样式

首页 > 代码库 > React Native 三:样式

2024-11-05 14:11:01 212人阅读

一、声明和使用样式

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,
              borderWidth:1,
              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：宽高。

三、将样式作为參数传递

1.为了能够在调用组件的地方对其子组件样式进行自己定义，能够将样式作为參数进行传递；
2.使用View.propTypes.style和Text.propTypes.style来确保传递的參数确实是style类型的；
index.android.js文件：

import React, {
  AppRegistry,
  … … 
} from ‘react-native‘;

//创建List组件
var List = React.createClass({
  //声明传递參数和參数类型
  propTypes: {
    style: View.propTypes.style,
    elementStyle: View.propTypes.style,
  },
  render() {
    var elements = [‘element1‘,‘element2‘,‘element3‘];
    return (
        //使用參数传递过来的样式设置子组件
        <View style={this.props.style}>
          //直接调用和使用參数传递的样式设置子组件
          {elements.map((element) =><View key={element} style={[styles.element, this.props.elementStyle]} />)}
        </View>
    );
  }
});

class AwesomeProject extends Component {
  render() {
    return (
      <View>
        <List style={styles.list} elementStyle={styles.listElement} />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  //传递给子组件样式list
  list: {
    width:300,
    height:300,
    borderWidth:1,
    borderColor:‘blue‘,
  },
  //传递给子组件样式listElement
  listElement: {
    width:50,
    height:50,
    backgroundColor:‘gray‘,
  },
  //直接调用样式element
  element: {
    borderWidth:1,
    borderColor:‘yellow‘,
  }
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject

提示1：假设RoadJS的时候，页面报错例如以下：
Warning: Each child in an array or iterator should have a
unique "key" prop. Check the render method of List.
处理1：在map函数中的<View>加上key={element}属性；

React Native 三:样式

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > React Native 三:样式

React Native 三:样式

看完仍有疑问？有类似问题直接问程序猿