ReactNative之style使用指南
- ReactNative中能使用的css样式有哪些呢
Valid style props: ["alignItems",
"alignSelf",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"elevation",
"flex",
"flexDirection",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection"]
- style使用内连方式 style={{flex:1,borderColor:'red'}}
- style包裹使用style={[styles.style1,styles.style2]}
- 同时包裹样式和内连style={[styles.style1,{flex:1,borderWidth:1}]}
StyleSheet提供了一种类似CSS样式表的抽象。
创建一个样式表:
var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, borderColor: '#d6d7da', }, title: { fontSize: 19, fontWeight: 'bold', }, activeTitle: { color: 'red', }, });
使用一个样式表:
<View style={styles.container}> <Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> </View>
ReactNative高级交流群 127482131 或访问 ReactNative技术专题
ReactNative之style使用指南的更多相关文章
- ReactNative真机运行指南
ReactNative真机运行指南 注意在iOS设备上运行React Native应用需要一个Apple Developer account并且把你的设备注册为测试设备.本向导只包含React Nat ...
- React-Native——html/css
做前端开发,熟悉了HTML+CSS+JS的开发模式,如果不看RN原理,直接用老一套的逻辑思维上手RN,可能会大跌眼镜.高效开发的前提,需要学习并理解RN的原理.本文主要记录内容是,关于RN开发的HTM ...
- 超级简单 一分钟实现react-native屏幕适配
今天因为react-native的style只能给width和height设置数字 没有react上的vw和vh 因为之前经常用vh vw 感觉不适应 找到了一个新的方法 使用Demension模块 ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- [React Native] State and Touch Events -- TextInput, TouchableHighLight
In React, components manage their own state. In this lesson, we'll walk through building a component ...
- [React Native] Basic iOS Routing -- NavigatorIOS
Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...
- avalon2学习教程05属性操作
avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...
- 【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台)-goodmao
--------------------------------------------------------------------------------------------------- ...
- 【Facebook的UI开发框架React入门之九】button简单介绍(iOS平台)-goodmao
--------------------------------------------------------------------------------------------------- ...
随机推荐
- 蓝牙Ibeacon室内定位和微信摇一摇周边原理分析
苹果推出Ibeacon室内定位技术是为了弥补GPS无法覆盖室内定位这种场景.苹果意味着创新,在其推动下,蓝牙Ibeacon得到了极大的应用.而腾讯则是利用蓝牙Ibeacon在场景体验方面进行了创新,实 ...
- Effective Java 71 Use lazy initialization judiciously
Lazy initialization - It decreases the cost of initializing a class or creating an instance, at the ...
- C# Ftp文件处理
1.创建文件夹 /// <summary> /// ftp创建文件夹(只能创建单层目录) /// </summary> /// <param name="Uri ...
- linux常用查看日志命令
转自:http://yinfeifei.iteye.com/blog/779217 1.cat命令: 功能:1)显示整个文件. 示例: $ cat fileName 2)把文件串连接后传到基本输出,如 ...
- 利用jsp和servlet,MySQL实现简易报表
beans包和jdbc包代码不放了,麻烦 Service.java: package service; import java.sql.Connection;import java.sql.Resul ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- linux: 获取监听指定端口的进程PID
在 linux 下经常需要杀死(重启)监听某端口的进程, 因此就写了一个小脚本, 通过 ss 命令获取监听制定端口的进程 PID, 然后通过 kill 命令结束掉进程: #!/bin/sh # set ...
- hdu 1542 Atlantis(线段树,扫描线)
Atlantis Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- linux 程序管理
在linux下做开发,经常要用到一些管理程序的命令,如查看进程,查看内存等情况.看网络情况.如下的笔记是看书时记下一些简单常用的命令. 1)top [root@005 fsh]#top[-d数字]|t ...
- Openstack-Ceilometer-SNMP的使用
1. 物理服务器配置 1.1安装 #yum install -y net-snmp net-snmp-utils 1.2 配置 复制[附件]中snmpd.conf文件到/etc/snmp/目 ...