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的更多相关文章

  1. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  2. react native基础与入门

    react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...

  3. React Native常用组件样式总结

    在react 中,有时要使用 style 指定样式 ,如要跟随放大比例关系,展示图标. const stylebutton = {width:25*scalesize, height:25*scale ...

  4. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  5. React Native基础&入门教程:调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...

  6. React Native基础概念和基础认识

    学习地址:https://github.com/vczero/react-native-lesson 当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.j ...

  7. React Native基础&入门教程:以一个To Do List小例子,看props和state

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexb ...

  8. react native头部标题样式修改

    navigationOptions: ({navigation}) => ({ headerTitle:'评估记录', headerBackTitle:null, headerLeft:null ...

  9. React Native 基础报错及解决方案记录

    刚开始上手RN,碰到很多坑,记录一下.碰到问题多去看看github上面的issue! 启动命令react-native run-ios报错 1.:xcrun: error: unable to fin ...

随机推荐

  1. awk循环语句-【AWK学习之旅】

      AWK中两种循环语句:if-else 和 while   控制流语句: 1.if-else 求总数,平均值: [root@monitor awkdir]# awk '$3>6 {n = n ...

  2. 网络攻防工具介绍——Metasploit

    Metasploit 简介 Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正的安全风险情报.这些 ...

  3. TCP深入详解

    TCP三次握手.四次挥手时序图: #TCP协议状态机 1.TCP建立连接时的初始化序列号X.Y可以是写死固定的吗?      如果初始化序列号(缩写为ISN:Inital Sequence Numbe ...

  4. Tomcat热部署,Web工程中线程没有终止

    近期项目中,用 jenkins 热部署 web工程时,发现工程中静态持有的线程(将ScheduledExecutorService定时任务存储在静态Map中),导致不定时出现数据库访问事务关闭异常,如 ...

  5. 批处理命令 For循环命令详解!

    批处理for命令详解FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能!看看他的基本格式(这里我引用的是批处理中的格式,直接在命令行只需要一个%号)FOR 参数 %%变量名 IN (相关文 ...

  6. 虚拟机 Ubuntu18.04 tensorflow cpu 版本

    虚拟机 Ubuntu18.04 tensorflow cpu 版本 虚拟机VMware 配置: 20G容量,可扩充 2G内存,可扩充 网络采用NAT模式 平台:win10下的Ubuntu18.04 出 ...

  7. Spring Boot与Spring的区别

    转自:https://blog.csdn.net/sinat_36246371/article/details/72902406 Spring Boot是最近这几年才火起来的,那么它到底与Spring ...

  8. R 中的哪些命令或者包让你相见恨晚?--转载知乎

    https://www.zhihu.com/question/24501195 节选: 看了这么多答案,觉得 Hadley Wickhamhad.co.nz 在R使用者的地位好高啊.其实我也觉得Had ...

  9. monkey测试小记

    本篇中不记录环境搭建,只是介绍一些经验和小秘诀吧. 一.使用安卓模拟器进行测试. 在刚刚接触到monkey测试的时候,用的真机进行测试,点击几万次甚至更多的时候,发现系统变慢了.也许是错觉,但是系统经 ...

  10. 由angular命令行工具(angular-cli)生成的目录和文件

    e2e目录:是端到端的测试目录,包含基本的测试桩.是用来做自动测试的. src:应用源代码目录.我们写的所有代码都应该在这里面. app:包括应用的组件和模块.我们自己写的绝大部分代码都是写在这个目录 ...