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

前端之家收集整理的这篇文章主要介绍了React-Native 基础(四)使用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通常更加明晰。
  5. @H_301_18@

    实例如下:

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

猜你在找的React相关文章