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

来源：互联网发布：android 系统日历源码编辑：程序博客网时间：2024/05/19 22:55

上一篇我们安装了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

阅读全文

0 0