ReactNative自定义控件状态更新的正确姿势

最新推荐文章于 2024-04-27 01:47:25 发布

无枝可依

最新推荐文章于 2024-04-27 01:47:25 发布

阅读量1k

点赞数

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/chenzhen200638/article/details/78355389

版权

React Native 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了ReactNative自定义控件中状态更新的正确方法，针对属性如颜色等无法即时更新导致界面不刷新的问题，提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative自定义控件状态更新的正确姿势

我们经常要自定义一个ReactNative控件,而在Render()方法中会用到组件的属性，而这些属性不能即时更新，导致界面不能刷新。举例如下:

比如我们定义了一个按钮组件，这个组件外部会指定一个颜色，我们在构造方法中初始化当前的属性borderColor为this.props.borderColor;

'use strict'
import React, {Component} from 'react';
import {
    View, Text, TouchableOpacity
} from 'react-native';

export default class Button extends Component {

    constructor(props) {
        super(props);
        this.state = {
            borderColor : this.props.borderColor || "#FF0000"
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.borderColor != this.borderColor){
            this.setState({
                borderColor : nextProps.borderColor
            });
        }
    }

    render() {
        return (<TouchableOpacity onPress = { this.props.onPress }>
            <View style={ [{
                borderWidth: 1,
                borderColor: this.state.borderColor,
                justifyContent:"center",
            }, this.props.style]}>

                <Text style = {
                    {
                    textAlign : "center",
                    textAlignVertical: "center" ,
                    alignSelf:"center",flex:1} } >
                    { this.props.text }
                </Text>

            </View>
        </TouchableOpacity>);
    }
}