混合开发的大趋势之一React Native（Hello Horld+简单ViewGroup）

转载请注明出处：王亟亟的大牛之路

强行安利，你值得拥有：https://github.com/ddwhan0123/Useful-Open-Source-Android

最近都在张罗新工作的事,整个周末也没怎么学习，感觉我已经是个咸鱼了，早上忙着去体检啥的，下午就补一篇出来吧，为了比较合理的体验，学习的教程走的是http://facebook.github.io/react-native/docs官方的途径，OK，废话不多 GOGOGO

上一篇，我们把环境搭建了下也跑了个事例Demo,那我们来看看那个页面是从何而起

文本编辑器打开以下目录找到

index.ios.js

这就是我们主页面的内容了，我们把它改成Hello World看看

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



class WjjPro extends Component {
    render(){
        return(
            <Text>Hi Wjj!</Text>
        );
    }
}


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

我们的Hello World就呈现在这里了，但是因为没有 CSS等内容他在默认的左上角。

那我们给他写一个CSS(之前做过 后台Web,但是JS CSS 什么的几乎是小白，和大家一起进步吧，会的老司机 带我！！！)

const styles=StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

效果如下：

使用 alignContent 属性对齐交叉轴上的各项（垂直)

flex-start  默认值。项目位于容器的开头。
flex-end    项目位于容器的结尾。
center  项目位于容器的中心。
space-between   项目位于各行之间留有空白的容器内。
space-around    项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

参考地址：http://webkkl.com/obj-style/justifycontent.php

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

这两个定义了我们的控件在整个View的中间

stretch 默认值。项目被拉伸以适应容器。 
center  项目位于容器的中心。  
flex-start  项目位于容器的开头。  
flex-end    项目位于容器的结尾。  
baseline    项目位于容器的基线上。 
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

参考地址：http://www.runoob.com/cssref/css3-pr-align-items.html

flex类似于安卓的 weight “权重“的概念我们来试验下。

我们在父控件View里再添加一个Text控件，如下

class WjjPro extends Component {
    render(){
        return(
            <View style={styles.container}>
                <Text style={styles.style2}>Hi Wjj!</Text>
                <Text style={styles.style3}>Hello Wjj!</Text>
            </View>
        );
    }
}

他们3个视图都有各自的style,我们再来看下他们的css

const styles=StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },style2:{
        backgroundColor: '#EEFCAF',
        flex: 2,
    },style3:{
        backgroundColor: '#F5FCFF',
        flex: 3,
    }
});

很明显 Hello Wjj比 Hi Wjj更长，但是Hi Wjj被挡了，我们把他们整个控件向下挪一点，像这样

只要在 那2个控件加margin: 20,就行了

接着再来说下 flexDirection

flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)。

加以操作，我们可以实现多”ViewGroup”的行为，像这样

代码修改如下

class WjjPro extends Component {
    render(){
        return(
            <View style={styles.container}>
                <View style={styles.style2}>
                    <Text>Hi Wjj1!  </Text>
                    <Text>Hi Wjj2!  </Text>
                </View>
                <View style={[styles.style3,{flexDirection: 'column'}]}>
                    <Text style={styles.style3}>Hello Wjj1!</Text>
                    <Text style={styles.style3}>Hello Wjj2!</Text>
                </View>
            </View>
        );
    }
}

const styles=StyleSheet.create({
    container:{
        flex: 1,
    },style2:{
        justifyContent: 'center',
        alignItems: 'center',
        margin: 20,
        flexDirection: 'row',
        backgroundColor: '#EEFCAF',
        flex: 2,
    },style3:{
        margin: 20,
        backgroundColor: '#F5FCFF',
        flex: 5,
    }
});

我们最外层还是 1个缩放比，内部是 2:5

然后 style2是横向，style3为纵向

相关资源：http://facebook.github.io/react-native/docs/tutorial.html

项目地址：https://github.com/ddwhan0123/ReactNativeDemo

源码地址：https://github.com/ddwhan0123/ReactNativeDemo/archive/master.zip