react-native样式

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

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

export default class ColorStyle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showText: true,
        }
    }
    render() {
        return(
            <View>
                <Text style={ styles.red }>红色</Text>
                <Text style={ styles.bigblue }>蓝色</Text>
                <Text style={ [styles.bigblue,styles.red] }>看看优先级</Text>
            </View>
        )
    }
}

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

AppRegistry.registerComponent('xiao', () => ColorStyle);

在react-native中，仍然使用JavaScript来写样式，所有的核心组件都接受名为style属性。这些样式基本上是遵循了web上的css命名，只是按照JS的命名法-驼峰命名法。