React Native之样式

样式

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} />

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(五)元素的创建

1012
来自专栏老马寒门IT

03Vue.js快速入门-Vue列表渲染及条件渲染实战

有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显示表格数据。 Vue...

22710
来自专栏阮一峰的网络日志

CSS in JS 简介

1、 以前,网页开发有一个原则,叫做"关注点分离"(separation of concerns)。 ? 它的意思是,各种技术只负责自己的领域,不要混合在一起,...

3057
来自专栏xx_Cc的学习总结专栏

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

4906
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Silly Eye

课程内容 Ø Animation Ø Event Triggers Ø Named Resources Ø Settings Page Ø Color...

2027
来自专栏阮一峰的网络日志

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使...

3124
来自专栏Java帮帮-微信公众号-技术文章全总结

WAI-ARIA无障碍网页应用属性完全展示

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏...

2394
来自专栏hightopo

基于 HTML5 的电力接线图 SCADA 应用

1253
来自专栏前端新视界

关于 CSS 反射倒影的研究思考

原文:The State of CSS Reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览。该文章篇幅较长,内容庞杂...

3029
来自专栏王磊的博客

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React N...

83214

扫码关注云+社区