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 (
            <Image source={pic} style={{width: 200, height:100}} />
        );
    }
}
// 2.Props(属性)的简单使用
class Greeting extends Component {
    render(){
        return (
            <Text> Hello {this.props.name}!</Text>
        );
    }

}

// 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 (
            <Text>{display}</Text>
        );
    }

}

// 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 (
//             <View style={{flex:1,flexDirection:'row'}}>
//                 <View style={{width:50,height:50, backgroundColor:'powderblue'}}></View>
//                 <View style={{width:100,height:100, backgroundColor:'skyblue'}}></View>
//                 <View style={{width:150,height:150, backgroundColor:'steelblue'}}></View>
//             </View>
//         );
//     }
// }

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

// class JustifyContentBasics extends Component {
//     render() {
//         return (
//             // 尝试把`justifyContent`改为`center`看看
//             // 尝试把`flexDirection`改为`row`看看
//             <View style={{
//                 flex:1,
//                 flexDirection:'column',
//                 justifyContent:'flex-end',
//             }}>
//                  <View style={{width:50,height:50,backgroundColor:'powderblue'}}></View>
//                  <View style={{width:50,height:50,backgroundColor:'skyblue'}}></View>
//                  <View style={{width:50,height:50,backgroundColor:'steelblue'}}></View>
//
//             </View>
//         )
//     }
// }

// 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`看看
            <View style={{
                flex:1,
                flexDirection:'row',
                justifyContent:'flex-end',
                alignItems:'flex-start',
            }}>
                <View style={{width:50,height:50,backgroundColor:'powderblue'}}></View>
                <View style={{width:50,height:50,backgroundColor:'skyblue'}}></View>
                <View style={{width:50,height:50,backgroundColor:'steelblue'}}></View>
            </View>
        );
    }

}



export default class AwesomeProject extends Component {
  render() {
    return (
      // <View style={styles.container}>
      //     {/*1.*/}
      //     {/*<Bananas></Bananas>*/}
      //
      //      {/*2.*/}
      //     {/*<Greeting name="rexxar"></Greeting>*/}
      //     {/*<Greeting name='Jaina'></Greeting>*/}
      //     {/*<Greeting name="jjfdfkld"></Greeting>*/}
      //
      //     {/*3.*/}
      //     {/*<Blink text=" i love to blink"></Blink>*/}
      //     {/*<Blink text='Yes blinking is so great' />*/}
      //     {/*<Blink text='Why did they ever take this out of HTML' />*/}
      //     {/*<Blink text='Look at me look at me look at me' />*/}
      //
      //     {/*4.*/}
      //     {/*<Text style={styles.red}>just red</Text>*/}
      //     {/*<Text style={styles.bigblue}>just bigblue</Text>*/}
      //     {/*<Text style={[styles.bigblue,styles.red]}> bigblue, then red</Text>*/}
      //     {/*<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>*/}
      //
      //      {/*5.*/}
      //
      //     {/*<View style={{width:50, height:50, backgroundColor:'powderblue'}}></View>*/}
      //     {/*<View style={{width:100, height: 100, backgroundColor:'skyblue'}}></View>*/}
      //     {/*<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}}></View>*/}
      //     {/*<View style={{flex: 1, backgroundColor: 'powderblue'}}></View>*/}
      //     {/*<View style={{flex: 2, backgroundColor: 'skyblue'}} ></View>*/}
      //     {/*<View style={{flex: 2, backgroundColor: 'steelblue'}}></View>*/}
      //
      //
      // </View>
      //
        <View  style={styles.container}>
              {/*6.1*/}
              {/*Flex Direction*/}
              {/*<FlexDirectionBasics/>*/}

              {/*6.2*/}
              {/*Justify Content*/}
              {/*<JustifyContentBasics/>*/}
              {/*6.3*/}
              {/*Align Items*/}
            <AlignItemsBasics/>
        </View>
    );
  }
}

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);