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 ...
随机推荐
- c# c++通信--命名管道通信
进程间通信有很多种,windows上面比较简单的有管道通信(匿名管道及命名管道) 最近做个本机c#界面与c++服务进行通信的一个需求.简单用命名管道通信.msdn都直接有demo,详见下方参考. c+ ...
- 20145303刘俊谦 《Java程序设计》第十周学习总结
教材学习内容总结 网络编程 就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时,大部 ...
- 20145312 实验五 《Java网络编程》
20145312 实验五<Java网络编程> 一. 实验内容及要求 实验内容: 运行下载的TCP代码,结对进行,一人服务器,一人客户端: 利用加解密代码包,编译运行代码,一人加密,一人解密 ...
- Calling Convention的总结
因为经常需要和不同的Calling Convention打交道,前段时间整理了一下它们之间的区别,如下: 清理堆栈 参数压栈顺序 命名规则 (MSVC++) 备注 Cdecl 调用者 (Caller) ...
- HA-web-services
一.HA部署 本次实验的程序选型为heartbeat v1 + hearesources.资源有IP和httpd,filesystem 配置HA集群的前提: (1)各节点资源一致,硬件或软件环境一致 ...
- sql 筛选表中指定字段包含26某个小写字母
SELECT *from 表名WHERE 字段 COLLATE Chinese_PRC_CS_AS LIKE '%[abcdefghijklmnopqrstuvwxyz]%'筛选表中指定字段包含26某 ...
- install opencv
OpenCV是一个基于开源发行的跨平台计算机视觉库,它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成,同时提供了Python.Ruby.MATLAB等语言的接口,实现了图像处理和计算机视觉 ...
- 虚拟机 Ubuntu18.04 tensorflow cpu 版本
虚拟机 Ubuntu18.04 tensorflow cpu 版本 虚拟机VMware 配置: 20G容量,可扩充 2G内存,可扩充 网络采用NAT模式 平台:win10下的Ubuntu18.04 出 ...
- Shell脚本 curl获取必应每日壁纸(Mac OS)
Mac上Safari不能下载壁纸,遇到好看的很想用作壁纸.写了一小段脚本用来拉取网页图片. curl: -sS 参数用来取消下载状态显示 grep 首先把含有图片网址的行提取了出来,针对这一行再做se ...
- DataReader 连接数据库完整过程和代码(Sql Server)
数据库名叫:Bu 有个表:A 里面有一列:ID 需要引用 using System.Data.SqlClient; 代码部分如下: SqlConnection sqlCon=new SqlConnec ...