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,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,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

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

React Native开发(二)

Props (属性)与State(状态)

相关文章