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 ...
随机推荐
- IT最新最火的网络词汇*2*(文章来源电商)
P2P.P2C .O2O .B2C.B2B.C2C等等最新最火的网络用词直接将我们都弄晕了,特此今天将这些划时代意义的词汇总结起来,若有什么不足之处,希望各位评论指正. 大致意思为: 1. ...
- 分分钟解决 MySQL 查询速度慢与性能差
一.什么影响了数据库查询速度 1.1 影响数据库查询速度的四个因素 1.2 风险分析 QPS: QueriesPerSecond意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的 ...
- kuangbin大佬模板(侵删)- hdu 2222
2017-08-13 19:54:08 kuangbin的AC自动机模板 可以直接过 入门题目 hdu2222 #include<cstdio> #include<cstring&g ...
- RabbitMQ入门(6)——远程过程调用(RPC)
在RabbitMQ入门(2)--工作队列中,我们学习了如何使用工作队列处理在多个工作者之间分配耗时任务.如果我们需要运行远程主机上的某个方法并等待结果怎么办呢?这种模式就是常说的远程过程调用(Remo ...
- Linux 实用操作命令
1. ssh远程连接服务器命令 ssh [username@]hostname 2. 查看远程服务器近期登陆记录 last 3. 用户及其主目录的创建 1. useradd –d /home/lb ...
- SQLite内存数据库操作类
using System; using System.Collections; using System.Collections.Generic; using System.Data; using S ...
- [WCF安全1]使用basicHttpBinding构建UserName授权的WCF应用程序
最近到了新公司,leader让我研究一下WCF的传输安全机制.以前也做过WCF的应用,但是很少涉及安全方面的东西.所以,花了三天的时间研究了一下如何在WCF的应用程序中配置安全.在这个系列文章中,我会 ...
- php获取经纬度
<?php header("content-type:text/html;charset=utf-8"); function ipjwd() { $getIp=$_SERVE ...
- Java的 final 关键字
本文主要探讨Java final 关键字修饰变量时的用法. !!!!文末有彩蛋!!!! 1.修饰类 当用final修饰一个类时,表明这个类不能被继承.也就是说,如果一个类你永远不会让他被继承,就可以用 ...
- linux bash shell中,单引号、 双引号,反引号(``)的区别及各种括号的区别
一.单引号和双引号 首先,单引号和双引号,都是为了解决中间有空格的问题. 因为空格在Linux中时作为一个很典型的分隔符,比如string1=this is astring,这样执行就会报错.为了避免 ...