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 ...
随机推荐
- 20145303刘俊谦 《Java程序设计》第2周学习总结
20145303刘俊谦 <Java程序设计>第2周学习总结 教材学习内容总结 1.对于标识符的一些名称规范(觉得挺重要而且容易混淆!定义就不写了,列一些例子): 包名: xxxyyyzzz ...
- Html基本用法
hmtl hyper text markup language 超文本标记语言 超文本:超越一般的文本 变色 加粗 变大 甚至设置超链接 标记:浏览器已经定义好的 一些由尖括号括起来的特殊符号 语言 ...
- NOIP2014 T4 子矩阵 dfs+dp
最近在狂补题啊QAQ... 打算先把NOIP的干掉吧... 点我看题 链接还是放洛谷的了... 题意:给一个n*m的矩阵,在这个矩阵里选 r 行 c 列,然后这 r 行 c 列所相交的格子为新矩阵的, ...
- POJ 3352 Road Construction(边—双连通分量)
http://poj.org/problem?id=3352 题意: 给出一个图,求最少要加多少条边,能把该图变成边—双连通. 思路:双连通分量是没有桥的,dfs一遍,计算出每个结点的low值,如果相 ...
- asp.net core + log4net+exceptionles+DI
参考了ABP的代码,我也用依赖注入的原则,设计了日志模块. 与abp不同之处在于:1)DI容器使用的是.net core自带的注入容器,2)集成了excetpionless日志模块,3)不依赖于abp ...
- spring 及 spring boot 资源文件配置
Spring配置文件引入xml文件: <import resource=" " />标签使用总结 https://www.cnblogs.com/javahr/p/83 ...
- 在 Spark 中使用 IPython Notebook
本文是从 IPython Notebook 转化而来,效果没有本来那么好. 主要为体验 IPython Notebook.至于题目,改成<在 IPython Notebook 中使用 Spark ...
- php调用mysql存储过程
MYSQL存储过程 原文链接:http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html 一.存储过程简介(mysql5.0以上支持) 我们常用的操作数据 ...
- hibernate:inverse、cascade,一对多、多对多详解
1.到底在哪用cascade="..."? cascade属性并不是多对多关系一定要用的,有了它只是让我们在插入或删除对像时更方便一些,只要在cascade的源头上插入或是删除,所 ...
- PIL.Image与Base64 String的互相转换
https://www.jianshu.com/p/2ff8e6f98257 PIL.Image与Base64 String的互相转换 mona_alwyn 2018.01.18 19:02* 字数 ...