RN state使用详解

        我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

        一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

state的初始化与使用:

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

export default class StateComponent extends Component {
    /**
     * 方式1
     * @type {{size: number}}
     */
    state = {
        size: 40,
    }

    constructor(props) {
        super(props);
        /**
         * 方式2
         */
        /*this.state = {
            size: 90,
        }*/
    }

    render() {
        return <Text>StateComponent_{this.state.size}</Text>;
    }
}
           

改变state的值,通过setState的方式

实例:动态缩放图片

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

export default class StateComponent extends Component {
    /**
     * 方式1
     * @type {{size: number}}
     */
    state = {
        size: 100,
    }

    constructor(props) {
        super(props);
        /**
         * 方式2
         */
        /*this.state = {
            size: 90,
        }*/
    }

    render() {
        return <View>
            <Text>StateComponent_{this.state.size}</Text>
            <Image source={require("./src/pic/dog.jpg")}
                   style={{width: this.state.size, height: this.state.size}}/>
            <Text onPress={() => {
                this.setState({
                    size: this.state.size + 10,
                });
            }
            }>放大图片</Text>
            <Text onPress={() => {
                this.setState({
                    size: this.state.size - 10,
                })
            }}>缩小图片</Text>
        </View>;
    }
}