样式

React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理。

声明样式

在 React Native 中声明样式的方法如下:

var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },
}); 

StyleSheet.create 的创建是可选的,但提供了一些关键优势。它通过将它们转换为引用一个内部表的纯数字,来确保值是不可变的和不透明的。通过将它放在文件的最后,也确保了它们为应用程序只创建一次,而不是每一个
render 都创建。

所有的属性名称和值是工作在网络中的一个子集。对于布局来说,React Native实现了 Flexbox

使用样式

所有的核心组件接受样式属性。

<Text style={styles.base} />
<View style={styles.background} />

它们也接受一系列的样式。

<View style={[styles.base, styles.background]} />

行为与 Object.assign 相同:在冲突值的情况下,从最右边元素的值将会优先,并且 falsy 值如 falseundefined 和null 将被忽略。一个常见的模式是基于某些条件有条件地添加一个样式。

<View style={[styles.base, this.state.active && styles.active]} /> 

最后,如果真的需要,您还可以在render中创建样式对象,但是这种做法非常不赞成。最后把它们放在数组定义中。

<View
  style={[styles.base, {
    width: this.state.width,
    height: this.state.width * this.state.aspectRatio
  }]}
/>

样式传递

为了让一个 call site 定制你的子组件的样式,你可以通过样式传递。使用 View.propTypes.style 和Text.propTypes.style,以确保只有样式被传递了。

var List = React.createClass({
  propTypes: {
    style: View.propTypes.style,
    elementStyle: View.propTypes.style,
  },
  render: function() {
    return (
      <View style={this.props.style}>
        {elements.map((element) =>
          <View style={[styles.element, this.props.elementStyle]} />
        )}
      </View>
    );
  }
});
// ... in another file ...
<List style={styles.list} elementStyle={styles.listElement} />

React Native之样式的更多相关文章

  1. React Native 三:样式

    一.声明和使用样式 1.React Native里面的样式和使用如以下所看到的.StyleSheet.create这个构造函数不是必须的. index.android.js文件 import Reac ...

  2. react native 图片样式导致的坑

    最近项目中遇到一个问题,代码如下,点击进入另一个页面时需要显示的图片会黑屏,另外退回到该页面的时候下面代码中的第一个图片会全黑几秒才渲染,从另一个路径进入该页面时并没有此问题,就找了半天是不是数据的问 ...

  3. React Native 组件样式测试

    View组件默认样式(注意默认flexDirection:'column') {flexGrow:0,flexShrink:0,flexBasis:'auto',flexDirection:'colu ...

  4. 使用React Native来撰写跨平台的App

    React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...

  5. react native定报预披项目知识点总结

    1.TextInput组件对安卓的适配问题 textInput 在iOS 显示正常,但是在android下会出现下横线,并且字会被遮盖 因此一般都这么用该组件 <TextInput style= ...

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

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

  7. 用React Native编写跨平台APP

    用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时.原生组件渲染的应用程序的框架.它基于React,Facebook的JavaScript的 ...

  8. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

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

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

随机推荐

  1. Sublime Text3时间戳查看转换插件的开发

    平常配置表中,经常需要用到时间配置,比如活动开始结束.从可读性上,我们喜欢2017-04-27 17:00:00,从程序角度,我们喜欢用1493283600.前者是包含时区概念的,而后者市区无关,所以 ...

  2. 四种方式实现子goroutine与主线程的同步

    如何实现子goroutine与主线程的同步 第一种方式: 这种方式很太死板,就不演示了. 第二种方式:使用 channel机制,每个 goroutine传一个 channel进去然后往里写数据,在再主 ...

  3. Laravel-admin 使用Layer相册功能

    使用Laravel-admin后台,Laravel-admin已经集成了很多前端组件,但是在手册中也没有发现能够展示相册的插件,而本人比较喜欢Layer弹窗的插件所以想使用Layer来进行效果展示 通 ...

  4. python学习之路基础篇(第八篇)

    一.作业(对象的封装) 要点分析 1.封装,对象中嵌套对象 2.pickle,load,切记,一定要先导入相关的类二.上节内容回顾和补充 面向对象基本知识: 1.类和对象的关系 2.三大特性: 封装 ...

  5. grpc的服务注册与发现及负载

    参考文章: (1)https://segmentfault.com/a/1190000008672912 (2)https://grpc.io/docs/ (3)https://github.com/ ...

  6. 通讯协议序列化解读(二) protostuff详解教程

    上一篇文章 通讯协议序列化解读(一):http://www.cnblogs.com/tohxyblog/p/8974641.html  前言:上一面文章我们介绍了java序列化,以及谷歌protobu ...

  7. JS基础速成(二)-BOM(浏览器对象模型)

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.BOM(浏览器对象模型) 1.screen对象. console.lo ...

  8. 输入一个正数n,输出所有和为n连续正数序列。例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以输出3个连续序列1-5、4-6和7-8。

    输入一个正数n,输出所有和为n连续正数序列.例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以输出3个连续序列1-5.4-6和7-8. #define N 15 void findS ...

  9. Android快速关联V4包的方式

    很多时候需要管理v4包,当然有很多种办法去关联.本人觉得最快速的方式,是通过添加配置文件的方式.只需要ctrl+c和ctrll+v就能解决了 方法如下: 1.新建一个android-support-v ...

  10. Tomcat的系统安全管理

    Tomcat是一个Web容器,我们开发的Web项目运行在Tomcat平台,这就好比将一个应用嵌入到一个平台上面运行,要使嵌入的程序能正常运行,首先平台要能安全正常运行.并且要最大程度做到平台不受嵌入的 ...