React Native 中 CSS 的使用

首先声明，此文原作者为黎 跃春

React Native中CSS

内联样式

对象样式

使用Stylesheet.Create

样式拼接

导出样式对象

下面的代码是index.ios.js中的代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import liyuechun from './styles'

var textStyle = {
  fontSize:15,
  backgroundColor:'#DAC',
  textAlign:'center'
};

class YZDemo extends Component {
  render() {
    return (
      <View style={
        {
          width: 300,
          height: 600,
          backgroundColor: 'red',
          padding: 50,
          margin: 10
        }
      }>

        <Text style={textStyle}>
          www.52learn.wang
        </Text>  

        <Text style={liyuechun.yuzhi}>
          匠心品质
        </Text>

        <Text style={liyuechun.liangxin}>
          良心育人
        </Text>

        <Text style={[liyuechun.textFontSize, liyuechun.textBGColor]}>
          黎跃春
        </Text>

        <Text style={[liyuechun.textFontSize, {backgroundColor: 'yellow'}]}>
          欢迎大家来到育知同创
        </Text>
      </View>
    );
  }
}

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

下面的代码是styles.js的代码：

import React from 'react';
import {
  StyleSheet
} from 'react-native';

var liyuechun = StyleSheet.create(
{
  yuzhi: {
    fontSize: 40,
    color: 'green',
    marginTop: 40,
    backgroundColor: 'blue'
  },

  liangxin: {
    fontSize: 80,
    backgroundColor: '#FFF',
    marginTop: 5
  },

  textFontSize: {
    fontSize: 20
  },
  textBGColor: {
    backgroundColor: '#F88'
  }
});

module.exports = liyuechun;

源码链接：https://github.com/YZMobileTalks/RN-CSS-Demo