育知同创-中国HTML5培训、Java培训高品质教育品牌

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 北京校区 深圳校区

▶ 您现在的位置:首页 > 行业动态 > [技术文章]3分钟搞定React Native中CSS的使用

[技术文章]3分钟搞定React Native中CSS的使用

时间:2016-10-08 17:01:26  来源:育知同创  作者:育知

  • 本篇文章春哥给大家分享一下React Native中CSS的用法。首先我们先看看Web端CSS的用法,然后对比一下RN中CSS的写法。

     

    W3C CSS的使用
     CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    如何将样式表加入到您的网页
     你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

    内联方式 Inline Styles
    内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
     
    示例代码:
     
    1.jpg

    内部样式块对象 Embedding a Style Block
    你可以在你的HTML文档的<head>标记里插入一个<style>块对象。
     
    示例代码:
     
    2.jpg
     
     
    外部样式表 Linking to a Style Sheet
    你可以先建立外部样式表文件*.css,然后使用HTML的link对象。
     
    示例代码:
    3.jpg
     
    导出样式对象
    下面的代码是index.ios.js中的代码:
     
    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
     
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
     
    import liyuechun from './styles'
     
    var textStyle = {
      fontSize:15,
      backgroundColor:'#DAC',
      textAlign:'center'
    };
     
    class YZDemo extends Component {
      render() {
        return (
          <View style={
            {
              width: 300,
              height: 600,
              backgroundColor: 'red',
              padding: 50,
              margin: 10
            }
          }>
     
            <Text style={textStyle}>
              www.52learn.wang
            </Text>  
     
            <Text style={liyuechun.yuzhi}>
              匠心品质
            </Text>
     
            <Text style={liyuechun.liangxin}>
              良心育人
            </Text>
     
            <Text style={[liyuechun.textFontSize, liyuechun.textBGColor]}>
              黎跃春
            </Text>
     
            <Text style={[liyuechun.textFontSize, {backgroundColor: 'yellow'}]}>
              欢迎大家来到育知同创
            </Text>
          </View>
        );
      }
    }
     
    AppRegistry.registerComponent('YZDemo', () => YZDemo);
     
    下面的代码是styles.js的代码:
     
    import React from 'react';
    import {
      StyleSheet
    } from 'react-native';
     
    var liyuechun = StyleSheet.create(
    {
      yuzhi: {
        fontSize: 40,
        color: 'green',
        marginTop: 40,
        backgroundColor: 'blue'
      },
     
      liangxin: {
        fontSize: 80,
        backgroundColor: '#FFF',
        marginTop: 5
      },
     
      textFontSize: {
        fontSize: 20
      },
      textBGColor: {
        backgroundColor: '#F88'
      }
    });
     
    module.exports = liyuechun;
     
    源码链接:https://github.com/YZMobileTalks/RN-CSS-Demo
     
    联系我们
     
    QQ截图20161008170905.jpg
    3.jpg

     





上一篇:[技术文章]React Native Material Design

下一篇:想做移动VR?先了解这五条开发指南


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号