React-native之样式

效果图：

'use strict';
import React,{Component} from 'react';
import {AppRegistry,Text,View,StyleSheet} from 'react-native';
class LotsOfStyles extends Component{
    render(){
        return(
            <View>

                <Text style={styles.red}>just red</Text>
                <Text style={styles.bigblue}>just big blue</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',
        fontSize:30,
        fontWeight:'bold',
    },
    red:{
        color:'red',
    },
});
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => LotsOfStyles);

ps: <Text style={styles.red}>just red</Text>后面不要加注释，否则会报错。记得要导入StyleSheet。多个样式用[ ]扩起来。样式中属性的写法和css的写法不一样。