React nativede的笔记

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//React是默认组件 非默认组件需要加{}
import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from ‘react-native‘;

// 什么时候用{}，包装对象的时候使用{}
// 什么时候用{}，表达式需要用{}
// 什么时候用{}，变量需要用{}
// 什么时候使用（），包装组件标签的时候，必须使用（）

//自定义，程序的入口组件
class reactNativeDemo extends Component {
    /*系统默认调用该方法，当一个组件要显示的时候，就会自动调用该方法
      render(){


      }
    */

    render(){

      var str = ‘gogogogo‘
      return(
          <View style={styles.mainViewStyle}>

            <Text>{str}</Text>


          </View>

      )

    }


}

//样式表，定义变量用var
var styles = StyleSheet.create({
    mainViewStyle : {
      //占据全屏
      flex:1,
      backgroundColor : ‘red‘

    }

})

//注册程序入口组件
//第一个参数：模块名称，随意填，与IOS的模块名称一一对应
//第二个参数：函数，箭头函数 ES6
//箭头函数 => 左边：函数参数 ，右边，函数返回值
AppRegistry.registerComponent(‘reactNativeDemo‘, () => reactNativeDemo);

row（默认值）：主轴为水平方向，从左向右。依次排列
row-reverse：主轴为水平方向，从右向左依次排列
column：主轴为垂直方向，默认的排列方式，从上向下排列
column-reverse：主轴为垂直方向，从下向上排列

nowrap 组件只排列在一行上，可能导致溢出。
wrap   组件在一行排列不下时，就进行多行排列

flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。
flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。
center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果
space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。
space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半

作者：袁峥
链接：http://www.jianshu.com/p/cc2e517ef23b
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"
flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。