ReactNative style

原创 2016年05月31日 11:55:10

所有的核心组件都可以接受style属性。

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

还可以接受数组形式的多个style。

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

如下面的代码,当this.state.active为false时,styles.active就会被忽略掉

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

将样式作为参数传递

为了能够在调用组件的地方对其子组件样式进行自定义,你还可以将样式作为参数进行传递。可以使用View.propTypes.style和Text.propTypes.style来确保传递的参数确实是style类型的。(propTypes是对props的类型检查和限制,参考文档点这里)

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>
    );
  }
});

// ... 在别的文件中引用List组件 ...
<List style={styles.list} elementStyle={styles.listElement} />

支持的属性

下面这些链接中查看最新支持的CSS属性。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ReactNative学习十六-View属性及Style

1.View属性方法介绍 View属性方法介绍如下: 序号 名称 属性Or方法 类型 说明 1 accessibilityLabel 属性 st...

reactNative

  • 2017-05-18 15:06
  • 37.67MB
  • 下载

Windows下搭建ReactNative开发环境(Android)

学习了一段时间ReactNative,最近有空总结一下,同时给正在学习ReactNative的伙伴提供参考,少走弯路。现在网上大部分的教程都是不怎么完善,或者是Mac下的实现,然很多人对ReactNa...

ReactNative Demo

  • 2017-01-13 23:02
  • 26.42MB
  • 下载

ReactNative中文文档

  • 2016-03-11 15:51
  • 201KB
  • 下载

iOS中嵌入ReactNative

iOS中嵌入ReactNativehttp://reactnative.cn/docs/0.43/integration-with-existing-apps.html#content首先贴上了学习r...

Reactnative.jar

  • 2017-09-16 11:40
  • 10KB
  • 下载

移动客户端开发快速上手ReactNative的学习路线

1. HTML(学习时间30分钟): 或多或少,大家肯定对HTML还是有所了解的,在开始前端之旅前,有必要系统的扫一下基础,推荐教程:http://www.jb51.net/shouce/htm...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)