React Native中的属性与变量[二]

上一篇我们安装了React Native以及看了一下HelloWorld，那么这一篇我们来看一下属性以及变量

属性

当然，学习还是跟着demo学习，首先来第一个demo

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

这里面出现来一个数据类型 let

这个是ES中的语法，跟这个相关的是另一个var

let只在当前代码块中生效

var出了当前的代码块也能生效

试验一下

export default class HelloWorlds extends Component {
    render() {
        let pic = {
    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
        return (
              // 尝试把`flexDirection`改为`column`看看
              <View style={{flex: 1, flexDirection: 'column',justifyContent:'center'}}>
                <Text>{str2}</Text>
                <Image source={pic} style={{width: 193, height: 110}} />
              </View>
        );
    }
}

{
  let str1 = "1"
  var str2 = "2"

}

运行效果

改成<Text>{str1}</Text>

这是内部的属性，那么外部传入的属性呢？

Props（属性）

例子：

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

可以理解为，每一个class都有一个props用来存储任意变量，并且不用事先定义好，的确是很神奇的写法

状态

State（状态）

直接上demo

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

function functionName() {

}
export default class HelloWorld extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems: 'center'}}>
        <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>
    );
  }
}


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

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('HelloWorld', () => HelloWorld);

这样的效果就是，显示的文字每秒进行闪烁效果

总结一下

props： 组件中父级向子级传递数据的方式 

   state：在不操纵DOM树的情况下 刷新页面的一种方式（通过操作state实现数据的时时变化）

   大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.

换句话来说 props就是初始值  需要改变只能操作 state