React-Native入门指南

    二、使用CSS样式 & Flexbox布局

    1. 1、基本样式
    2. 这里使用View和Text组件作为演示对象，首先，修改index.ios.js里面的代码，这里只需要关注StyleSheet和render里面的模板。修改后的代码如下：
    3. /**
    4. * Sample React Native App
    5. * https://github.com/facebook/react-native
    6. */
    7. 'use strict';
    9. var React = require('react-native');
    10. var {
    11.     AppRegistry,
    12.     StyleSheet,
    13.     Text,
    14.     View,
    15. } = React;
    17. var HelloWorld = React.createClass({
    18.     render: function() {
    19.         return (
    20.               <View>
    21.                 <View></View>
    22.               </View>
    23.     }
    24. });
    26. var styles = StyleSheet.create({
    27. });
    29. AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
    30. 这时候，你cmd + R刷新模拟器应该看到是空白的界面。现在，是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象，并且严格区分该对象属性的类型，所以要遵循对象的写法，而不能使用以前css的写法，这个需要自己熟悉了。
    31. （1）增加一个带边框的矩形，红色边框
    32.     直接在组件上添加样式是这样的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是组件的一个自有属性，第一个{}JS执行环境或者说是模板，第二个{}只是css样式对象的括号而已(慢慢体会,不难理解)。这样修改后的代码如下：
    33.     render: function() {
    34.         return (
    35.               <View>
    36.                 <View style={{height:40, borderWidth: 1, borderColor: 'red'}}>
    38.                 </View>
    39.               </View>
    40.         );
    41.     }
    42.     cmd ＋ R刷新模拟器，结果如下：

    基本css

    1.      （3）独立样式类
    2.      其实上面已经展示了独立样式类了，那么样式类创建很简单，我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的<View style={{对象名称.对象属性}}></View>，就跟上面（2）的代码一样。
    4.      2、说说Flexbox布局
    5.      其实，这样的css样式，作为web开发者一用就会，那么说说布局的事儿。除去margin, padding, position等大家熟悉的web布局的话，最为重要的就是flexbox，目前支持的属性如下,有6个：

    1.       (1)先说flex属性，上一段代码
    2.               render: function() {
    4.                       <View style={styles.style_0}>
    5.                         <View style={styles.style_1}></View>
    6.                         <View style={styles.style_1}></View>
    7.                         <View style={{flex:10}}></View>
    8.                     </View>
    9.                 );
    10.               }
    11.         });
    13.         var styles = StyleSheet.create({
    14.               style_0:{
    15.                 flex:1,
    16.               },
    17.               style_1:{
    18.                 flex: 5,
    19.                 height:40,
    20.                 borderWidth: 1,  
    21.                 borderColor: 'red',
    22.              }
    23.         });
    24.         当一个(元素)组件，定义了flex属性时，表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间，具体如下图：

    flex

    1.     (3)alignSelf:对齐方式
    2.     alignSelf的对齐方式主要有四种：flex-start、 flex-end、 center、  auto、 stretch。看看代码，应该就很清楚了：

    1.     效果如下图

    flex