加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React-Native 基础(四)使用style定义组件的样式

发布时间:2020-12-15 03:26:18 所属栏目:百科 来源:网络整理
导读:参考文档:http://facebook.github.io/react-native/docs/style.html style是一个props style的键值命名格式遵循CSS风格,除了名字使用驼峰法则而不是使用分隔符。例如背景色: backgoundColor ,不是 background-color 可以传递style数组,最后一个style有

参考文档:http://facebook.github.io/react-native/docs/style.html

  1. style是一个props
  2. style的键值命名格式遵循CSS风格,除了名字使用驼峰法则而不是使用分隔符。例如背景色:backgoundColor,不是background-color
  3. 可以传递style数组,最后一个style有优先权,因而可以使用它继承styles
  4. 为了组件的扩展性,在一个作用域中使用StyleSheet.create定义多个style通常更加明晰。

实例如下:

import React,{ Component } from 'react';
import { AppRegistry,StyleSheet,Text,View } from 'react-native';

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue,styles.red]}>bigblue,then red</Text>
        <Text style={[styles.red,styles.bigblue]}>red,then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',fontWeight: 'bold',fontSize: 30,},red: {
    color: 'red',});

AppRegistry.registerComponent('LotsOfStyles',() => LotsOfStyles);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读