React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春
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 的使用的更多相关文章
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- react native中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
随机推荐
- LINUX DNS解析的3种修改方法~
1.HOST 本地DNS解析 vi /etc/hosts 添加规则 例如: 223.231.234.33 www.baidu.com 2.网卡配置文件DNS服务地址 vi /etc/sysconfi ...
- "转" CXF+JAXB处理复杂数据
CXF简单数据类型以及类(JavaBean)都提供了较好的支持. 但是对于一些复杂类型(集合或者Map的嵌套)的处理时,就需要我们进行“”人工干预“.在网上找了一些文章,其中这篇写的最为详细,再次备注 ...
- HTML是什么?如何使用?
①我们首先打开桌面DW网页开发器. 也可以是其他的开发器. ②打开之后那么我们创建一个新的文档: 点击创建之后出现下图: 一般我们不管用哪种网页开发器,都会最先呈现上图的状态,那么下面来解读一下这些文 ...
- C++ 基础知识复习(一)
数据类型,常量与变量部分:(发现有些点竟然这么多年第一次发现) C++基本数据类型有哪些: 答:整型,浮点型,void型. 注:其他各种数据类型均是这三种类型的扩充,另外void类型在实际程序中经常用 ...
- java获取汉字拼音首字母 --转载
在项目中要更能根据某些查询条件(比如姓名)的首字母作为条件进行查询,比如查一个叫"李晓明"的人,可以输入'lxm'.写了一个工具类如下: import java.io.Unsupp ...
- C语言SOCKET编程指南
1.介绍 Socket 编程让你沮丧吗?从man pages中很难得到有用的信息吗?你想跟上时代去编Internet相关的程序,但是为你在调用 connect() 前的bind() 的结构而不知所措? ...
- Git版本控制管理学习笔记1-介绍
几乎所有的版本控制工具都是出于同样的目的:开发以及维护开发出来的代码,方便读取代码的历史,记录所有的修改.这里,介绍的是当前在开源社区内非常流行的版本控制工具Git.它是由Linus Torvalds ...
- myeclipse eclipse 使用git插件访问github 的解决方案
具体的步骤很多帖子都有写,这里不再赘述,需要说明的一点,git插件的版本很重要,在官网上下载的最新版本在MyEclipse8.5,MyEclipse9.1,MyEclipse10上面都没有成功. 这里 ...
- Linux下安裝Oracle database內核參數設置
參考:1529864.1 ************************************************** RAM ...
- Oracle安装介质及补丁集下载地址
Oracle9i Database Release 2 Enterprise/Standard/Personal Edition for Windows NT/2000/XP http://downl ...