zoukankan      html  css  js  c++  java
  • React Native props & state

    今天又敲了一丁点代码,看了一下props和state的用法

    原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下,跟props一样都是

    this.props.propertyName

    this.state.stateName

    这种形式,props和state是控制组件的两种类型,props是开发者自定义的组件参数,state表达的是一种状态用于控制组件的内容

    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    * @flow
    */

    import React, { Component } from 'react';

    import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    } from 'react-native'

    class Blink extends Component{

    constructor(props) {
    super(props);
    this.state = {showText: true,showRedColor:false};

    // Toggle the state every second
    setInterval(() => {
    this.setState({ showText: !this.state.showText ,showRedColor:!this.state.showRedColor});
    }, 1000);
    }

    render() {
    let display = this.state.showText ? this.props.text : ' ';
    display = this.state.showRedColor ? "red color text":display
    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'/>
    <RedTextView rdName='this is a text'/>
    <RedTextView rdName='have not set color yet.'/>
    <RedTextView rdName='end'/>
    <BlueTextView blName='blue name begin'/>
    <BlueTextView blName='has not set color yet'/>
    <BlueTextView blName='blue name end'/>
    </View>
    )
    }
    }

    class RedTextView extends Component{

    render(){
    return (
    <View>
    <Text>{this.props.rdName}</Text>
    </View>
    )
    }
    }

    class BlueTextView extends Component{

    render(){
    return (
    <View>
    <Text>{this.props.blName}</Text>
    </View>
    )
    }
    }

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



  • 相关阅读:
    Apache Airavata 0.6 发布
    Erebus 0.5 发布,2D 实时角色扮演游戏
    Pcompress 1.3.0 发布,性能大幅提升
    JasperStarter 1.0.1 发布
    Newscoop 4.1 发布,适合记者的 CMS 系统
    Wireshark 1.8.5 发布,网络协议检测程序
    Open Search Server 1.4 Beta2 发布
    Erlang/OTP R16A 发布
    Apache Derby 10.8.3.0 发布
    reading notes for solr source code
  • 原文地址:https://www.cnblogs.com/codetime/p/6243445.html
Copyright © 2011-2022 走看看