样式

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. Linux下查看alert日志文件的两种方法

    --linux下查看alert日志文件的两种方法: --方法1: SQL> show parameter background_dump_dest; NAME TYPE VALUE ------ ...

  2. CSS实现元素居中原理解析

    在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...

  3. delphi 线程教学第五节:多个线程同时执行相同的任务

    第五节:多个线程同时执行相同的任务   1.锁   设,有一个房间 X ,X为全局变量,它有两个函数  X.Lock 与 X.UnLock; 有如下代码:   X.Lock;      访问资源 P; ...

  4. leetcode之Largest Rectangle in Histogram

    问题来源:Largest Rectangle in Histogram 问题描述:给定一个长度为n的直方图,我们可以在直方图高低不同的长方形之间画一个更大的长方形,求该长方形的最大面积.例如,给定下述 ...

  5. Ubuntu安装telent服务器时出现:apt-get:Package has no installation

    当我在终端敲下这条命令的时候,系统就提示telnetd:apt-get:Package has no installation sudo apt-get install xinetd telnetd ...

  6. [转]django-registration quickstart

    Basic configuration and use--------------------------- Once installed, you can add django-registrati ...

  7. 游戏引擎cocos2d-android使用大全

    做手机游戏需要三个核心的类,即:SurfaceView,SurfaceHolder,Thread.帧数要在30帧左右是最好的. cocos2d游戏引擎 封装好的框架,可直接使用 cocos2d-and ...

  8. C++ ifstream,ofstream读写二进制文件

    为什要吧数据存为二进制 这个嘛,是我个人习惯,一般,我们会把日志文件存为文本文件.数据文件存成二进制文件. 其实,我们接触的文件,比如图像.视频都是以二进制的形式存储的,要想查看这类数据,必须知道数据 ...

  9. cuda网格的限制

    限制于计算能力有关. 详情 http://docs.nvidia.com/cuda/cuda-c-programming-guide/index.html#compute-capabilities 只 ...

  10. SQLite 删除表(http://www.w3cschool.cc/sqlite/sqlite-drop-table.html)

    SQLite 删除表 SQLite 的 DROP TABLE 语句用来删除表定义及其所有相关数据.索引.触发器.约束和该表的权限规范. 使用此命令时要特别注意,因为一旦一个表被删除,表中所有信息也将永 ...