React-Native基础_2.样式Style
2.样式Style
基本使用
方式1 直接在View 上面写style 内容
<View style={{
backgroundColor: '#07811d',
flex: 1
}}>
<Text>
Welcome to React Native!
</Text>
</View>
方式2 StyleSheet.create定义一个style 常量,然后直接使用常量中定义好的属性
export default class Day0718 extends Component {
render() {
return (
<View style={styles.Container}>
<Text style={styles.Text}>
Welcome to React Native!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
Container :{
borderWidth :1,
borderColor:'#c9382d',
borderRadius:15,
shadowColor:'#6435c9',
shadowOpacity:0.6,
shadowRadius:2,
shadowOffset:{
height:1,
width:0,
},
margin:10,
backgroundColor: '#c9382d',
flex: 1,
},
Text:{
color:'#6435c9',
fontSize: 26,
textAlign:'center',
fontStyle:'italic',
letterSpacing:2,
lineHeight:33,
fontFamily:'Helvetica Neue',
fontWeight:'300',
textDecorationLine:'underline',
textDecorationStyle:'dashed',
},
});
-----------------------------期待大神们的到来
------------------------一---起分享,一起进步!需要你们
React-Native基础_2.样式Style的更多相关文章
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- react native基础与入门
react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...
- React Native常用组件样式总结
在react 中,有时要使用 style 指定样式 ,如要跟随放大比例关系,展示图标. const stylebutton = {width:25*scalesize, height:25*scale ...
- 跨平台框架与React Native基础
跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...
- React Native基础&入门教程:调试React Native应用的一小步
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...
- React Native基础概念和基础认识
学习地址:https://github.com/vczero/react-native-lesson 当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.j ...
- React Native基础&入门教程:以一个To Do List小例子,看props和state
本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexb ...
- react native头部标题样式修改
navigationOptions: ({navigation}) => ({ headerTitle:'评估记录', headerBackTitle:null, headerLeft:null ...
- React Native 基础报错及解决方案记录
刚开始上手RN,碰到很多坑,记录一下.碰到问题多去看看github上面的issue! 启动命令react-native run-ios报错 1.:xcrun: error: unable to fin ...
随机推荐
- git操作方便,简单使用的客户端sourcetree 安装配置所遇问题总结
常言道:工欲善其事,必先利其器. SourceTree是老牌的Git GUI管理工具了,也号称是最好用的Git GUI工具 这里先言言它的好: * 免费 * 功能强大:无论你是新手还是重度用户,Sou ...
- Btrace使用入门
1.什么是BTrace BTrace是sun公司推出的一款Java 动态.安全追踪(监控)工具,可以在不用重启的情况下监控系统运行情况,方便的获取程序运行时的数据信息,如方法参数.返回值.全局变量和堆 ...
- SQL系列 - SQL语句优化个人总结
关于SQL语句优化方法 有些是通用的(如避免Select *): 有些不同的数据库管理系统有所区别(如Where子句顺序): 然后必须根据实际环境进行调优,因为即使是相同的数据库和表,在数据量或其他环 ...
- JSON 中JsonConfig的使用(转)
我们通常对一个Json串和Java对象进行互转时,经常会有选择性的过滤掉一些属性值,而json-lib包中的JsonConfig为我们提供了这种 功能,具体实现方法有以下几种.(1)建立JsonCon ...
- linux 搭建Java环境
一.下载jdk/jre文件 下载链接 二.安装Java环境 1.解压文件到 /usr/java 目录 # tar zxvf jre-8u60-linux-x64.gz 2.配置环境变量 ...
- Tomcat access log配置(二)
前次讨论了spring boot 中添加Tomcat access log 是轻松愉快,配置文件中添加server.tomcat.accesslog即可,那么如果是外置的Tomcat容器又该如何配置呢 ...
- 剑指Offer——最长不包含重复字符的子字符串
Solution 动态规划. f(i)表示包含第i个字符的最长子串. 如果第i个字符没在之前出现过,那么f(i) = f(i - 1) + 1 如果第i个字符在之前出现过,这个时候应该分两种情况,假设 ...
- Asp.Net MVC 请求原理分析
分析Asp.Net MVC的请求过程,我们从以下几方面看: 配置:IIS网站的配置可以分为两个块:全局 Web.Config 和本站 Web.Config . Asp.Net Routing属于全局性 ...
- arm-linux-gcc安装使用教程
arm-linux-gcc如何下载安装2(转) [转]ubuntu下交叉编译环境构建(arm-linux-gcc-3.4.1.tar.bz2 ) 2009-03-03 10:05 1.下载arm-li ...
- 基于cornerstone.js的cornerstoneWADOImageLoader
上一篇简单介绍了cornerstone.js的相关使用介绍和基于cornerstone的web库cornerstoneWADOImageLoader,在实际开发中遇到了相关的一些问题,在这里说明一下, ...