码迷,mamicode.com
首页 > Web开发 > 详细

熟悉react native的css样式

时间:2018-10-15 18:13:34      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:参考   结束   round   str   pad   字符   dash   line   缩放   

为react-native组件创建样式属性有两种方法

第一种是在组件的style属性中直接插入一个包含样式属性的js对象:

export default class App extends Component<Props> {
    render(){
     return{
           <View>
               <Text style={{backgroundColor:‘black‘}}>
                   这是一种设置方式,即直接添加一个js对象
               </Text>
               <Text style={{backgroundColor:‘red‘}}>
                   在jsx语法中,遇到‘{‘,就会认为开始执行js,直到遇到‘}‘结束;
                   遇到‘<‘,就会认为需要把它编译为html元素,直到遇到‘>‘结束;
              </Text>
           </View>
      }
} }

 

第二种是使用StyleSheet创建一个样式表对象:

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>I Love React Native!</Text>
        <Text style={styles.instructions}>来吧?</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Text style={styles.instructions}>下午练手</Text>
      </View>
    );
  },  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
});

属性列表

1.宽高

width  //
height //

 

2.背景颜色(backgroundColor)

backgroundColor
opacity //透明度

 

3.边框(border)

//边框圆角设置
borderTopLeftRadius  //左上角圆角
borderTopRightRadius //右上角的圆角
borderBottomLeftRadius //左下角的圆角
borderBottomRightRadius //右下角的圆角
borderRadius //所有角的圆角

//边框宽度
borderLeftWidth  //左边边框宽度
borderRightWidth //右边边框宽度
borderTopWidth //顶部边框宽度
borderBottomWidth //底部边框宽度
borderWidth  //所有边框宽度

//边框颜色
borderColor //边框颜色

 

4.外边距(margin)

marginBottom  //距下外边距
marginLeft  //距左外边距
marginRight  //距右外边距
marginTop  //距上外边距
marginVertical  //垂直外边距(也就是距上,距下边距)
marginHorizontal //水平外边距(距左,距右边距)
margin //所有边距

 

5.内边距

paddingBottom  //距下内边距
paddingLeft  //距左内边距
paddingRight  //距右内边距
paddingTop  //距上内边距
paddingVertical//垂直内边距
paddingHorizontal  //水平内边距
padding //所有内边距

 

6.文字

color  //文字颜色
textAlign  //对其方式 (‘left‘,‘right‘,‘auto‘,‘center‘,‘justify‘)
fontSize //字体大小
fontStyle //字体风格 正常:‘normal‘, 斜体:‘italic‘
fontWeight //字体粗细 加粗:‘bold‘, ‘100‘, ‘200‘ 
letterSpacing //字符间距
lineHeight //行间距
textDecorationLine //字体装饰线 下划线:‘underline‘, 删除线:‘line-through‘,下划线删除线:‘underline line-through‘
textDecorationStyle //字体装饰线风格 单线:‘solid‘ 双线:‘double‘ 虚线:‘dotted‘,‘dashed‘
textDecorationColor //字体装饰线颜色

 

7.图像

//图像变换
scaleX //水平方向缩放
scaleY //垂直方向缩放
rotation //旋转
translateX //水平方向平移
translateY //水平方向平移
resizemode  //拉伸图片 ‘cover‘ ,‘strech‘,‘contain‘

 

参考链接:https://www.jianshu.com/p/ec95efa03312

 

熟悉react native的css样式

标签:参考   结束   round   str   pad   字符   dash   line   缩放   

原文地址:https://www.cnblogs.com/the-artist/p/9792131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!