React-Native征程（2）

http://facebook.github.io/react-native/docs/props.html
官方文档学习第二天。
效果图：

Paste_Image.png

首先是代码：

/**
 * 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';

export default class test extends Component {
  render() {
    // 此处let为es6变量声明方法，es6标准推荐使用此方法，
    // 声明 名为pic的变量，将图片的url地址装载到pic中
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      // render（）方法是渲染函数，组件通过render（）渲染到屏幕中，而此处到return（）
      // 是对render返回的数据，确切的说是render（）渲染的内容
      // 显然这里在view组件（视图组件中）装载了两个组件
      // Text文字组件，以及Image组件，react-native使用html的形式描述应用的属性
      // 简而言之，这是一种类web语言的开发方式，如果对web有一定的了解，可以快速展开对原生对开发
      // 同一开发语言以降低开发成本，作为开发者是乐意接受和推广的
      <View style={styles.container}>
        <Text>hello world!</Text>
        <Image source={pic} style={{width: 193, height: 110}}/>
      </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,
  },
});

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

II自定义组件及属性的使用

效果图：

Paste_Image.png

代码及说明：

/**
 * 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';

//此处自定义一个组件 名为Greeting,其中 this.props.name 是从父类组件传递而来的属性
// this.props读取的是上一级组件的属性
class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}
// 声明test组件，并在代码最后将其注册，简单的理解就是作为程序的入口
// 其中使用了Greeting这个组件，并在此组建中给name赋值
// 结合效果图，此处name的赋值，在上面Greeting组件创建是自发的hello这一自有行为中体现
export default class test extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Greeting name='abc'></Greeting>
        <Greeting name='efg'></Greeting>
        <Greeting name='hij'></Greeting>
      </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,
  },
});

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

III初始数据props与动态数据states
效果图：

Paste_Image.png

代码及注解

/**
 * 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';

// 此处自定义一个组件 名为Blink
// 两种数据来控制一个组件：props和state。props是在父组件中指定，
// 而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state
// 在constructor中初始化state
// （译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰）
// 然后在需要修改时调用setState方法。
class Blink extends Component {
  constructor(props) {
    //super(props),简单的理解就是对父类属性或者说是对象的引用，通过super可以访问父类部分数据
    super(props);
    this.state = {showText: true};
    //设置state的值
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }
  render() {
    // 此处的妙处是将props数据写入到state中，这是对props和states特性对比的巧妙代码
     let display = this.state.showText ? this.props.text : ' ';
     return (
       <Text>{display}</Text>
     );
   }
}

// 声明test组件，并在代码最后将其注册，简单的理解就是作为程序的入口
// 其中使用了Greeting这个组件，并在此组建中给name赋值
// 结合效果图，此处name的赋值，在上面Greeting组件创建是自发的hello这一自有行为中体现
export default class test extends Component {
  render() {
    return (
      <View style={styles.container}>
      {/*
        Blink组件赋值 text中，这是props数据，初始化定义好的
        */}
         <Blink text='I love to 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' />
      </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,
  },
});

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