React Native 笔记1

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

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

// 1.加载网络图片，注意开启ios项目info.plist的允许https请求
class  Bananas extends  Component{
    render() {
        let pic = {
            uri: 'http://pic.jj20.com/up/allimg/911/0P316142450/160P3142450-4.jpg'
        };
        return (
            
        );
    }
}
// 2.Props(属性)的简单使用
class Greeting extends Component {
    render(){
        return (
             Hello {this.props.name}!
        );
    }

}

// 3.State(状态)的简单使用

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = { showText:true};

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(()=>{
            this.setState(previousState => {
                return {showText: !previousState.showText};
            });
        }, 1000);
    }
    render() {
        // 根据当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.text : ' ';
        return (
            {display}
        );
    }

}

// 4. 样式的简单使用
// 常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。



// 5.高度和宽度


// 6.使用Flexbox布局
// 6.1.一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。
// 6.1.2首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

// class FlexDirectionBasics extends Component { // 6.1 flexDirection row column
//     render(){
//         return (
//             
//                 
//                 
//                 
//             
//         );
//     }
// }

// 6.2.在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。
// 子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？
// 对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

// class JustifyContentBasics extends Component {
//     render() {
//         return (
//             // 尝试把`justifyContent`改为`center`看看
//             // 尝试把`flexDirection`改为`row`看看
//             
//                  
//                  
//                  
//
//             
//         )
//     }
// }

// 6.3.在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
// 子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？
// 对应的这些可选项有：flex-start、center、flex-end以及stretch。

class AlignItemsBasics extends Component {
    render(){
        return(
            // 尝试把`alignItems`改为`flex-start`看看
            // 尝试把`justifyContent`改为`flex-end`看看
            // 尝试把`flexDirection`改为`row`看看
            
                
                
                
            
        );
    }

}



export default class AwesomeProject extends Component {
  render() {
    return (
      // 
      //     {/*1.*/}
      //     {/**/}
      //
      //      {/*2.*/}
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //
      //     {/*3.*/}
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //
      //     {/*4.*/}
      //     {/*just red*/}
      //     {/*just bigblue*/}
      //     {/* bigblue, then red*/}
      //     {/*red, then bigblue*/}
      //
      //      {/*5.*/}
      //
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //     {/**/}
      //
      //
      // 
      //
        
              {/*6.1*/}
              {/*Flex Direction*/}
              {/**/}

              {/*6.2*/}
              {/*Justify Content*/}
              {/**/}
              {/*6.3*/}
              {/*Align Items*/}
            
        
    );
  }
}

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,
  },
  bigblue: {
      color:'blue',
      fontWeight:'bold',
      fontSize:30,
  },
  red: {
    color: 'red',
  },
});

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