React Native开发(二)

Props (属性)与State(状态)

Props 可以看做是android中的 final static 成员变量
在使用之前声明,使用的时候直接调用,并且该值不变
声明的地方需要放在render(){}里面,return 之前

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

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

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

上面是个简单的例子,image定义的View, source和stype都是js中的属性,具体的值是通过props获取的
{pic}表示获取pic是个名称,取pic所赋的值,和java的声明成员变量和赋值没有什么区别
这个例子比较简单,看下面例子:

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

从这个例子里面可以看出执行顺序是从LotsOfGreetings开始执行的
当执行到的时候去Greeting这个类执行代码,并且将name=”Rexxar”的值传入其中
然后Greeting 这个类就会执行里面显示Text的方法,并且取值是this.props.name 获取

分解成java代码

class LotsOfGreetings extends Component {

    main(){
        new Greeting (Rexxar);
        new Greeting (Jaina);
        new Greeting (Valeera);
    }
}
class Greeting {
    private final String name;
    Greeting (String name){
        this.name = name;
    }
    main(){
        system.out(this.name);
    }
}

大概这个意思,语法问题就算了,看逻辑就行

props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
这是state 的官方解释
大概就是常量和变量的区别了吧

看一下例子:

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

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

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <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>
    );
  }
}

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

看了之前的例子在来分析这个例子,就比较好弄清楚了
BlinkApp 就是主进程,new了4个Blink对象,分别给对象里面的props的test属性赋值

在Blink的render() 里面使用this.props 来获取test的值,区别就是多了个显示与隐藏的变化
也就是通过一个变量进行控制
在constructor(props) 里面进行初始化,这个目前当成固定写法好了
setInterval 就当个无限循环的延迟hander
修改的方法就是通过this.setState

上面的都是一些基本的使用,下一章看一下样式的设置