Style样式定义

在HelloWorld中，您一定对<View style={{width:50,height:50,backgroundColor:'red'}}></View>感兴趣。

在React Native中，您并不需要学习什么特殊的语法来定义样式。仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。 比如：

<
Text style={[styles.welcome,{fontSize:30}]}
>
Hello,CRN
<
/Text
>

welcome中的fontSize为20，数组的最后传入一个fontSize为30的对象，所以最后Text的fontSize为30

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

HelloWorld/src/page1.js中

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    button: {
        backgroundColor:'black'
    }
});

常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。如果您没有CSS经验，而且很好奇style到底包括哪些样式，可参考组件View的style

现在您已经了解了布局和样式，更加全面的学习可以直接看UIExplorer。手码静态页面已经不是问题，可以学习Props构建动态页面了。