首先声明,此文原作者为黎 跃春

React Native中CSS

内联样式

对象样式

使用Stylesheet.Create

样式拼接

导出样式对象

下面的代码是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

React Native 中 CSS 的使用的更多相关文章

  1. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  2. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  3. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  4. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  5. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  6. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  7. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  8. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

随机推荐

  1. LINUX DNS解析的3种修改方法~

    1.HOST 本地DNS解析 vi /etc/hosts 添加规则 例如: 223.231.234.33 www.baidu.com 2.网卡配置文件DNS服务地址  vi /etc/sysconfi ...

  2. "转" CXF+JAXB处理复杂数据

    CXF简单数据类型以及类(JavaBean)都提供了较好的支持. 但是对于一些复杂类型(集合或者Map的嵌套)的处理时,就需要我们进行“”人工干预“.在网上找了一些文章,其中这篇写的最为详细,再次备注 ...

  3. HTML是什么?如何使用?

    ①我们首先打开桌面DW网页开发器. 也可以是其他的开发器. ②打开之后那么我们创建一个新的文档: 点击创建之后出现下图: 一般我们不管用哪种网页开发器,都会最先呈现上图的状态,那么下面来解读一下这些文 ...

  4. C++ 基础知识复习(一)

    数据类型,常量与变量部分:(发现有些点竟然这么多年第一次发现) C++基本数据类型有哪些: 答:整型,浮点型,void型. 注:其他各种数据类型均是这三种类型的扩充,另外void类型在实际程序中经常用 ...

  5. java获取汉字拼音首字母 --转载

    在项目中要更能根据某些查询条件(比如姓名)的首字母作为条件进行查询,比如查一个叫"李晓明"的人,可以输入'lxm'.写了一个工具类如下: import java.io.Unsupp ...

  6. C语言SOCKET编程指南

    1.介绍 Socket 编程让你沮丧吗?从man pages中很难得到有用的信息吗?你想跟上时代去编Internet相关的程序,但是为你在调用 connect() 前的bind() 的结构而不知所措? ...

  7. Git版本控制管理学习笔记1-介绍

    几乎所有的版本控制工具都是出于同样的目的:开发以及维护开发出来的代码,方便读取代码的历史,记录所有的修改.这里,介绍的是当前在开源社区内非常流行的版本控制工具Git.它是由Linus Torvalds ...

  8. myeclipse eclipse 使用git插件访问github 的解决方案

    具体的步骤很多帖子都有写,这里不再赘述,需要说明的一点,git插件的版本很重要,在官网上下载的最新版本在MyEclipse8.5,MyEclipse9.1,MyEclipse10上面都没有成功. 这里 ...

  9. Linux下安裝Oracle database內核參數設置

    參考:1529864.1 ************************************************** RAM                                  ...

  10. Oracle安装介质及补丁集下载地址

    Oracle9i Database Release 2 Enterprise/Standard/Personal Edition for Windows NT/2000/XP http://downl ...