码迷,mamicode.com
首页 > 其他好文 > 详细

React Native的state使用详解

时间:2017-11-26 23:01:13      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:设置   两种   nts   fonts   方式   rom   传递   style   nat   

什么是State

props是不可改变,只读的。为了实现交互,就需要用到组件的state。我们将组件看为状态机,UI是各种各样的状态,并在各种各样的状态之间可以切换,只需要改变组件的state,就会重新渲染UI。
state是组件私有的,是没有办法通过其他组件传递过来的。

state的两种声明方式

import React from ‘react‘;
import {Text, View} from "react-native";


export default class StateTest extends React.Component {

    /**
     * 方式二
     * @type {{size: number}}
     */
    state = {
        size: 100,
    };

    constructor() {
        super();
        /**
         * 方式一
         */
        // this.state = {
        //     size: 80,
        // };
    }

    render() {
        return (
            <View>
                <Text style={{fontSize: 20, color: ‘red‘}}>{this.state.size}</Text>
            </View>
        );
    }
}

设置State

this.setState({
    size: this.state.size - 10
})

React Native的state使用详解

标签:设置   两种   nts   fonts   方式   rom   传递   style   nat   

原文地址:http://www.cnblogs.com/zsjblog/p/7900725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!